Javascript 如何在React中将输入数据添加到JSON数组中。

我一直在努力理解React概念，并完成了我的Todo项目。我显示了虚拟数据，但无法向虚拟数据添加新值，虚拟数据存储在单独文件todos.js中的对象数组中

这是你的电话号码

---

这是我得到的错误-

index.js:2177警告：数组或迭代器中的每个子级都应具有唯一的“键”属性。

---

TodoList.js

import React from 'react';
import Todo from './Todo';
import todos from '../todos'

class TodoList extends React.Component {
    constructor() {
        super();
        this.state = {
            todoItems: todos,
            newItem: {}
        }
    }

    addItem = (event) => {
        event.preventDefault();
        const todoList = this.state.todoItems;
        todoList.push(this.state.newItem);
        this.setState({ 
            todoList: todos,
            newItem: {}
        });

    };

    handleInput = (event) => {
        this.setState({ newItem: event.target.value });
    }

    render() {
        const itenary = this.state.todoItems;
        return (
            <div>
                {itenary.map(todo =>
                    <div key={todo.id}>
                        <Todo handleClick={this.props.handleClick} thing={todo} />
                    </div>

                )}
                <br />
                <form onSubmit={this.addItem}>
                    <input type="text" onChange={this.handleInput} placeholder="Add a new task" />
                    <button>Submit</button>
                </form>
            </div>
        );
    }
}

export default TodoList;

---

非常感谢您提供的任何帮助和/或反馈。

您必须为添加到

todoItems

的新todo提供一个唯一的

id

，该id可用于在渲染时将其与其他todo区分开来

您也不应该通过使用

push

来改变当前状态。相反，您应该使用一个全新的数组来设置state，该数组包含前一个数组所做的一切

示例

class TodoList extends React.Component {
  constructor() {
    super();
    this.state = {
      todoItems: todos,
      newItem: ""
    };
  }

  addItem = event => {
    event.preventDefault();
    this.setState(prevState => {
      return {
        todoItems: [
          ...prevState.todoItems,
          { id: Math.random(), text: prevState.newItem, completed: false }
        ],
        newItem: ""
      };
    });
  };

  // ...
}

const todos=[
{id:1，文本：“去健身房”，完成：false}，
{id:2，文本：“洗衣服”，完成：false}，
{id:3，文本：“为考试而学习”，完成：false}，
{id:4，文本：“阅读一本书”，完成：false}，
{id:5，文本：“打扫卧室”，完成：false}，
{id:6，文本：“去公园”，完成：false}
];
类TodoList扩展了React.Component{
构造函数（）{
超级（）；
此.state={
待办事项：待办事项，
新项目：“
};
}
addItem=事件=>{
event.preventDefault（）；
this.setState（prevState=>{
返回{
待办事项：[
…prevState.todoItems，
{id:Math.random（），文本：prevState.newItem，已完成：false}
],
新项目：“
};
});
};
handleInput=事件=>{
this.setState（{newItem:event.target.value}）；
};
render（）{
常量=this.state.todoItems；
返回(
{itenary.map（todo=>(
))}


提交
);
}
}
类Todo扩展了React.Component{
构造函数（）{
超级（）；
此.state={
单击：false
};
}
handleClick=（）=>{
this.setState（{单击：！this.state.clicked}）；
};
render（）{
const styles=this.state.clicked
？{text装饰：“线穿过”}
：{textDecoration:“无”}；
返回(
{this.props.thing.text}
);
}
}
render（，document.getElementById（“根”））
非常感谢您抽出时间！我感谢你的意见。：）
const todos = [
    { id: 1, text: 'Go to the gym', 'completed': false },
    { id: 2, text:  'Do laundry', 'completed': false },
    { id: 3, text: 'Study for exams', 'completed': false },
    { id: 4, text: 'Read a book', 'completed': false },
    { id: 5, text: 'Clean the bedroom', 'completed': false },
    { id: 6, text: 'Go to the park', 'completed': false },
];

export default todos; 

class TodoList extends React.Component {
  constructor() {
    super();
    this.state = {
      todoItems: todos,
      newItem: ""
    };
  }

  addItem = event => {
    event.preventDefault();
    this.setState(prevState => {
      return {
        todoItems: [
          ...prevState.todoItems,
          { id: Math.random(), text: prevState.newItem, completed: false }
        ],
        newItem: ""
      };
    });
  };

  // ...
}