如何改变数组状态容器中的对象属性??React Hooks useState

Question

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

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

Todo Form组件

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

所以，当有人推下复选框输入时，属性&;status&;更改为true/false。当尝试使用setPosts改变状态时，我改变了所有数组，而不是我选择的对象子。

基于组件

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
))
}