Javascript 反应待办事项列表。附加项功能不工作

我正在按照教程制作React todo应用程序。 我有组件和上下文文件。 我有addItem功能，但当我单击“添加待办事项”按钮时， 项目和日期未呈现到待办事项列表中。 此外，它还显示了一个错误作为警告：列表中的每个子级都应该有一个唯一的“键”属性。尽管 我已经给了你身份证

因为我在学习教程，我不知道我哪里做错了。 如果有人能说出问题所在，我们将不胜感激

App.js

import React from 'react';
import Navbar from './components/Navbar';
import Form from './components/Form';
import TodoList from './components/TodoList';
import TodoContextProvider from './contexts/TodoContexts';

function App() {
  return (
    <div className="App">
        <TodoContextProvider>
          <Navbar />
          <TodoList />
          <Form />
        </TodoContextProvider>

    </div>
  );
}

export default App;

从“React”导入React；
从“./components/Navbar”导入Navbar；
从“./components/Form”导入表单；
从“./components/TodoList”导入TodoList；
从“/contexts/TodoContexts”导入TodoContextProvider；
函数App（）{
返回(
);
}
导出默认应用程序；

TodoContexts.js

import React, { createContext, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

export const TodoContext = createContext();

const TodoContextProvider = (props) => {
  const [items, setItems] = useState([
    {items: 'laundry', date: '2020-11-18', id: 1},
    {items: 'lunch', date: '2020-11-20', id: 2}
  ]);

  const addItems = (items, date) => {
    setItems([...items, {items, date, id: uuidv4()}]);
  };

  const removeItems = (id) => {
    setItems(items.filter(item => item.id !== id));
  };

  return (
    <TodoContext.Provider value={{ items, addItems, removeItems }}>
      {props.children}
    </TodoContext.Provider>
  )
}

export default TodoContextProvider

import React，{createContext，useState}来自“React”；
从“uuid”导入{v4作为uuidv4}；
export const TodoContext=createContext（）；
const TodoContextProvider=（道具）=>{
const[items，setItems]=useState([
{项目：'洗衣房'，日期：'2020-11-18'，id:1}，
{项目：'午餐'，日期：'2020-11-20'，id:2}
]);
常量附加项=（项目、日期）=>{
setItems（[…items，{items，date，id:uuidv4（）}]）；
};
const removietems=（id）=>{
setItems（items.filter（item=>item.id！==id））；
};
返回(
{props.children}
)
}
将默认值导出到DoContextProvider

TodoList.js

import React, { useContext } from 'react';
import TodoDetails from './TodoDetails';
import { TodoContext } from '../contexts/TodoContexts';

const TodoList = () => {
  const { items } = useContext(TodoContext);
  return items.length ? (
    <div className="todo-list">
      <ul>
        {items.map(item => {
          return ( <TodoDetails item={item} key={item.id} /> )
        })}
      </ul>
    </div>
  ) : (
    <div className="empty">You have no todos at the moment.</div>
  )
}

export default TodoList

import React，{useContext}来自“React”；
从“/TodoDetails”导入TodoDetails；
从“../contexts/TodoContexts”导入{TodoContext}；
const topolist=（）=>{
const{items}=useContext（TodoContext）；
返回项目。长度(

{items.map（item=>{
返回（）
})}

) : (
你现在没什么事可做。
)
}
将默认值导出到列表

TodoDetails.js

import React, { useContext } from 'react';
import { TodoContext } from '../contexts/TodoContexts';

const TodoDetails = ({ item }) => { //TodoList item is props
  const { removeItems } = useContext(TodoContext);

  return (
    <li onClick={() => removeItems(item.id)}>
      <div className="items">{item.items}</div>
      <div className="date">{item.date}</div>
    </li>
  )
}

export default TodoDetails

import React，{useContext}来自“React”；
从“../contexts/TodoContexts”导入{TodoContext}；
const TodoDetails=（{item}）=>{//TodoList item是props
const{removitems}=useContext（TodoContext）；
返回(
removitems（item.id）}>
{item.items}
{item.date}

)
}
将默认值导出到模板

Form.js

import React, { useState, useContext } from 'react';
import './Form.css';
import { TodoContext } from '../contexts/TodoContexts';

const Form = () => {
  const {addItems} = useContext(TodoContext);
  const [items, setItems] = useState('');
  const [date, setDate] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(items, date);
    addItems(items, date);
    setItems('');
    setDate('');
  }

  return (
      <form className="form" onSubmit={handleSubmit}>

        <input
          type="text"
          value={items}
          placeholder="Enter todo"
          onChange={(e) => setItems(e.target.value)}
        />

        <input
          type="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />

        <input type="submit" value="Add todo"/>

      </form>
  )
}

export default Form

import React，{useState，useContext}来自“React”；
导入“/Form.css”；
从“../contexts/TodoContexts”导入{TodoContext}；
常数形式=（）=>{
const{addItems}=useContext（TodoContext）；
const[items，setItems]=useState（“”）；
const[date，setDate]=使用状态（“”）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
控制台日志（项目、日期）；
附件（项目、日期）；
设置项（“”）；
设定日期（“”）；
}
返回(
setItems（例如target.value）}
/>
设置日期（e.target.value）}
/>
)
}
导出默认表单

Navbar.js

import React, { useContext } from 'react';
import { TodoContext } from '../contexts/TodoContexts';

const Navbar = () => {
  const { items } = useContext(TodoContext);

  return (
    <div>
      <h1>Todo List</h1>
      <p>Currently you have {items.length} todos to get through...</p>
    </div>
  )
}

export default Navbar

import React，{useContext}来自“React”；
从“../contexts/TodoContexts”导入{TodoContext}；
常量导航栏=（）=>{
const{items}=useContext（TodoContext）；
返回(
事項清單
目前您有{items.length}个待办事项要处理

)
}
导出默认导航栏

您的错误可能是由于在addItems函数中使用了相同的'items'变量名：

尝试将第一个参数的名称改为“item”

 const addItems = (item, date) => {
    setItems([...items, {item, date, id: uuidv4()}]);
  };