在react中显示todo表单和更新todoform的问题

Question

我目前正在 React 创建一个待办事项应用程序，我可以创建和删除待办事项列表 但我在使用新的待办事项更新列表时遇到问题 当我单击 todo.jsx 中的更新按钮时，我希望它显示我创建的表单 然后就可以显示新的列表了。我让它工作正常，但唯一有效的是它将列表中的每个项目显示为表单，而不仅仅是需要更新的一个项目。我需要帮助来学习如何解决这个问题。我不知道是否需要传递该函数并将其映射出来以测试该项目是否等于单击更新后传入的 id。每当我这样做时，我都无法显示新列表，而是可以通过控制台将其注销，但它不会呈现到页面。

这是我的app.jsx

import React, {useState} from 'react'
import ToDoForm from './Components/ToDoForm'
import ToDoList from './Components/ToDoList'
import Update from './Components/Update'
import { v4 as uuid } from 'uuid'
import './style.css'

export default function App() {

  
  const [todoItems, setTodoItems] = useState([])
  const [updateForm, setUpdateForm] = useState(false)
  
  
  const createTodo = (todo) => {
    setTodoItems(prev => [...prev, {
      id:uuid(),
      task: todo,
      completed: false,
      progress: "0%",
      priority: "low",
      date: new Date().toDateString(),
    }])
  }

  const deleteTodo = (id) => {
    const newTodoItems = todoItems.filter(item => item.id !== id)
    setTodoItems(newTodoItems)
  }

  const handleUpdate = (id) => {
    todoItems.map(item => {
      if(item.id === id) {
        setUpdateForm(prev => !prev)
        return <Update />
      }
    })
  }
  
  const updateTodo = (id, newValue) => {
    console.log(id, newValue)
  }

  

  return (
    <main>
      <ToDoForm 
        createTodo={createTodo}
      />
      
      <ToDoList 
        todos={todoItems}
        deleteTodo={deleteTodo}
        updateTodo={updateTodo}
        handleUpdate={handleUpdate}
        updateForm={updateForm}
      />
    </main>
      
  )
}

这是我的TODOLIST

import React from 'react';
import ToDo from './ToDo';
import Update from './Update'
export default function ToDoList({todos,deleteTodo,handleUpdate,updateForm}) {   
  
  const displayToDos = todos.map(todo => (

    <ToDo 
      key={todo.id}
      id={todo.id}
      task={todo.task}
      deleteTodo={deleteTodo}
      handleUpdate={handleUpdate}
      todos={todos}
    />
  ));
  return (
    <div>
      {todos && displayToDos} 
      {updateForm && <Update />}
    </div>
  )
  
}

这是我的待办事项

import React from 'react'

export default function ToDo({task,id,deleteTodo,handleUpdate}) {

  
  return (
    <>
      <p>{task}</p>
      {task && <button onClick={() => handleUpdate(id)}>Update</button>}
      {task && <button onClick={() => deleteTodo(id)}>Delete</button>} 
    </>
  )
}

这是我的更新表格

import React, { useState } from 'react';
import ToDo from './ToDo'
export default function Update({id,updateTodo}) {

  const [newValue, setNewValue] = useState("");

  const handleEdit = (event) => {
    setNewValue(event.target.value)
  }

  const handleUpdate = (event) => {
    event.preventDefault()
    updateTodo(id,newValue)
  }

  return (
    <>
        <form onSubmit={handleUpdate}>
          <input 
            type="text" 
            value={newValue}
            placeholder="update task" 
            required
            onChange={handleEdit}
          /> 
          <button type="submit">Update</button>
        </form>
    </>
  )
}

我尝试渲染表单来代替待办事项 我尝试只渲染表单和其他待办事项。 我还尝试创建另一个待办事项列表。

Answer 1

首先，您的 Update 组件需要一个 id 和一个 updateTodo 函数作为 props 传递，并且在这两种情况下都使用该组件，但没有传递任何 props。

 {updateForm && <Update />}

和

  todoItems.map(item => {
      if(item.id === id) {
        setUpdateForm(prev => !prev)
        return <Update />
      }
    })

现在，映射迭代并没有真正起作用，因为映射函数返回数组的新版本，而不更改数组本身，因此唯一发生的事情是切换 updateForm 变量。此外，数组变量是一个状态变量，因此您只能使用分配的 setState 函数来更改它：

setTodoItems

如果我理解正确，您想要更改更新组件中待办事项的文本，您可以通过创建一个新的状态变量来保留要更新的待办事项的 id 并将其传递给更新组件来实现此目的，如下所示:

import React, {useState} from 'react'
import ToDoForm from './Components/ToDoForm'
import ToDoList from './Components/ToDoList'
import Update from './Components/Update'
import { v4 as uuid } from 'uuid'
import './style.css'

export default function App() {

  
  const [todoItems, setTodoItems] = useState([])
  const [updateForm, setUpdateForm] = useState(false)
  const [todoIdToUpdate, setTodoIdToUpdate] = useState(null)
  
  const createTodo = (todo) => {
    setTodoItems(prev => [...prev, {
      id:uuid(),
      task: todo,
      completed: false,
      progress: "0%",
      priority: "low",
      date: new Date().toDateString(),
    }])
  }

  const deleteTodo = (id) => {
    const newTodoItems = todoItems.filter(item => item.id !== id)
    setTodoItems(newTodoItems)
  }

  const handleUpdate = (id) => {
    setTodoIdToUpdate(id);
    setUpdateForm(prev => !prev) // or you could just set it true here
  }
  
  const updateTodo = (id, newValue) => {
    console.log(id, newValue)
  }

  

  return (
    <main>
      <ToDoForm 
        createTodo={createTodo}
      />
      
      <ToDoList 
        todos={todoItems}
        deleteTodo={deleteTodo}
        updateTodo={updateTodo}
        handleUpdate={handleUpdate}
        updateForm={updateForm}
        todoIdToUpdate={todoIdToUpdate}
      />
    </main>
      
  )
}

有了要在列表组件中更新的待办事项的 id，现在您可以将其传递给更新组件，甚至可以根据需要更改组件的逻辑并传递待办事项本身。