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

Posted 2023-02-22

【中文标题】如何更改数组状态容器中的对象属性？ React Hooks 使用状态

【英文标题】：How to change an object property in an array state container?? React Hooks useState

【发布时间】：2021-06-04 16:36:38

【问题描述】：

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

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

待办事项表单组件

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 更改状态时，我更改了所有数组而不是我选择的对象子对象。

TodoList 组件

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

【问题讨论】：

setPosts(s => s.map(x => x.id === post.id ? ..new object... : x))

【参考方案1】：

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

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