如何在 React js 中创建状态数组

Posted 2023-02-22

【中文标题】如何在 React js 中创建状态数组

【英文标题】：how to create state array in react js

【发布时间】：2018-12-06 02:44:22

【问题描述】：

我正在创建一个简单的待办事项应用程序，用户可以在其中选择日期、编写待办事项并设置从和到的时间。

我在渲染函数中添加了 4 个字段。如果我的方法是错误的，请指导我。最后，我想要一个数组 todolist，索引元素和子数组索引元素作为日期，子元素有 todo，from 和 to time。

示例：

todolist[
    27-06-2018 : [
       todo: eat breakfast
       from: 9:00
       to: 9:30
    ]
    28-06-2018 :[
       todo: eat lunch
       from: 12:00
       to: 12:30
    ]
]

对于上述需求，如何初始化状态？

【参考方案1】：

todolist[

    27-06-2018 : [
       todo: eat breakfast,
       from: 9:00,
       to: 9:30
     ]
    ,
    28-06-2018 :[
       todo: eat lunch,
       from: 12:00,
       to: 12:30
       ]
    
]

尝试为数组中的项目创建对象

【参考方案2】：

我建议您将待办事项作为对象存储在您的 todolist 数组中，例如：

todolist[
  
    date: '27-06-2018',
    todo: 'eat beakfast',
    from: '9:00',
    to: '9:30',
  ,
  
    date: '28-06-2018',
    todo: 'eat lunch',
    from: '9:00',
    to: '9:30',
  
];

要按日期过滤数组，您可以使用 filter 方法：

todoslist.filter(todo => todo.date == '27-06-2018');

【讨论】：

谢谢，你能告诉我如何为此初始化状态吗？

你可以像this.state = todos: []这样用一个空的待办事项数组来初始化你的状态，然后设置你做的待办事项：todos = []; todos.push(insertyourtodoobjecthere)然后this.setState(todos)在es6中todos就像在做@ 987654327@