如何在 React 中更改数组状态的特定项目？答案

【问题标题】：How to change specific item on state of array in React?如何在 React 中更改数组状态的特定项目？
【发布时间】：2021-11-09 16:52:32
【问题描述】：

我正在使用 react 和 context API 创建一个 todolist。默认情况下，创建项目时，数组项目的“isDone”键为 false。当我点击 completeAll 按钮时，我想让所有任务的“isDone”为真。

import './FormInput.scss';
import List from '../List/List';
import Footer from '../Footer/Footer';
import {MainContext, useContext} from "../../context";

function FormInput() {

   const {taskList, SetTaskList} = useContext(MainContext);

   const submitTask = (e) => {
     e.preventDefault();
     SetTaskList((prev) => [...prev,{"task":e.target.task.value,"isDone":false}])
     console.log(e.target.task.value);
    }

   const CompleteAll = (e) =>{
       SetTaskList((prev) => {
        const list = prev.map((item) => item.isDone===true)
        return{
           list
         }
    })
   }
   return (
    <div className="form-input">
      <h1>TODOS</h1>
     <div className="form-top">
      <button id="completeAll" onClick = { e => CompleteAll(e)}>❯</button>
      <form onSubmit = {(e) => submitTask(e)}>
        <input type="text" name="task" id="taskInfo" placeholder="What needs to be done?"/>
      </form>  
    </div>
    <List/>
     { taskList[0] ? <Footer/> : ""}
    </div>
   );
  }

  export default FormInput;

这里是代码。我尝试编写 completeAll 函数，但它将任务列表设置为单个真假值。

【问题讨论】：

标签： reactjs setstate use-state react-context

【解决方案1】：

你可以使用spread operator来做。

const CompleteAll = (e) => {
  SetTaskList((prev) => {
    return prev.map((item) => ({ ...item, isDone: true }));
  });
};

【讨论】：