如何更改数组 state 容器中的 object 属性？ React Hooks 使用状态

Question

我是 React 初学者并尝试制作一个简单的 Todo 应用程序。 该应用程序可以添加、删除所有任务或仅删除一项。

Todo Form 组件包含一个输入和两个按钮，第一个用于添加任务，最后一个用于删除所有任务。 因此，当添加一个任务时，输入的当前值被推送到另一个 state 称为帖子。 然后帖子的 state 被共享为其他名为“TodoList”的组件中的属性，该组件显示帖子（数组）的列表显示。

Todo 表单组件

import React ,{useState} from 'react'
import TodoList from './TodoList'

function TodoForm() {
    const initialState = {
        id:"",
        description:"",
        status:""
    }

    const [task, setTask] = useState(initialState)
    const [posts, setPosts] = useState([])

    const handleChange = (e) => {
        setTask({
            id:Date.now(),
            description:e.target.value,
            status:false
        })
    }

    const dropArray = (e) => {
        e.preventDefault()
        let confirm = window.confirm("Do you want erase all Tasks?")
        if (confirm){
            setPosts([])
        }
    }
    
    const handleSubmit = (e) =>{
        e.preventDefault()
        if(task.description !== ""){
        setPosts([...posts , task])
        console.log('Post Rendering Array', posts)
    }  else {
        alert("The type box is empty!!")
    }
        setTask({
            id:'',
            description:'',
            status:false
        })
    }

    return (
        <div>
            <h1>What's the plan for Today</h1>
            <form onSubmit={handleSubmit}>
                <input 
                    type="text"
                    value={task.description}
                    onChange={handleChange}
                    placeholder='Type a Message'
                />
                <button>
                    Add Task
                </button>
                <button onClick={dropArray}>
                    Drop Task
                </button>
            </form>
            <TodoList posts={posts} setPosts={setPosts}/>
        </div>
    )
}

export default TodoForm

所以，我希望当有人按下复选框输入时，属性“状态”更改为真/假。 当尝试使用 setPosts 更改 state 时，我更改了所有数组而不是我选择的 object 子项。

待办事项列表组件

import React from 'react'

function TodoList(props) {
    const posts = props.posts

    const deleteTask = (id) => {
        const filteredTask = posts.filter(task => task.id !== id)
        const removeTask = props.setPosts(filteredTask)
    }

    const changeStatus = (post) =>{
        // deleteTask(post.id)
        const status = {
            id: post.id,
            description:post.description,
            status: !post.status
        }

        props.setPosts([status])

        // props.setPosts([status])

        console.log(post)
    }

    return (
        <div>
            <ol>
                {posts.map(post =>{
                return (
                    <li key={post.id}>
                        <textarea readOnly value={post.description}/>
                        <input type="checkbox" onChange={()=>changeStatus(post)} checked={post.status}/>
                        <button onClick={()=>deleteTask(post.id)}>X</button>
                        <button>+</button>
                    </li>
                )
            })}
            </ol>
        </div>
    )
}

export default TodoList

Answer 1

您应该在changeStatus中找到并更改确切的项目：

  const changeStatus = post => {
    props.setPosts(prev => prev.map(
      item => item.id === post.id 
        ? {...item, status: !item.status}
        : item
    ))
  }