javascript - 反应待办事项列表。addItem 功能不起作用

问题描述

我正在按照教程制作一个 React todo 应用程序。我有组件和上下文文件。我有 addItem 功能，但是当我单击“添加待办事项”按钮时，项目和日期没有呈现到待办事项列表中。此外，它显示一个错误警告：列表中的每个孩子都应该有一个唯一的“关键”道具。即使我给了一个身份证。

由于我正在按照教程进行操作，因此我不知道我做错了什么。如果有人能说出什么是错的，将不胜感激。

应用程序.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;

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

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

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

表单.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

导航栏.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

标签： javascriptnode.jsreactjs

javascript - 反应待办事项列表。addItem 功能不起作用

问题描述

解决方案

推荐阅读