Question

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

由于我正在阅读本教程，所以我不知道自己在哪里做错了。如果有人能说出问题所在，将不胜感激。

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;

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

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

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

Answer 1

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

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

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

反应待办事项清单。 addItem函数不起作用

1 个答案: