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

这是 file hierarchy

这是我得到的错误-

index.js:2177 Warning: Each child in an array or iterator should have a unique "key" prop.

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 (
                {itenary.map(todo =>
                    <div key={todo.id}>
                        <Todo handleClick={this.props.handleClick} thing={todo} />
                <form onSubmit={this.addItem}>
                    <input type="text" onChange={this.handleInput} placeholder="Add a new task" />
                    <button>Submit</button>
                </form>
export default TodoList;

Todo.js

import React from 'react';
class Todo extends React.Component {
    constructor() {
        super();
        this.state = {
            clicked: false
    handleClick = () => {
        this.setState({ clicked: !this.state.clicked });
    render() {
        const styles = this.state.clicked ? { textDecoration: 'line-through' } : { textDecoration: 'none' };
        return (
            {/* This is where the todo item is*/}
            <div style={styles} onClick={this.handleClick} key={this.props.thing.id}>{this.props.thing.text}</div>
export default Todo;

todos.js

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; 

任何帮助和/或反馈都将不胜感激。