React Hooks更新数组不生效：TodoList新增任务无法存入state问题求助

新增任务不生效的原因 #

• 首先是React useState的异步更新特性：state更新是异步批量执行的，调用setTasks后，当前作用域内的tasks还是更新前的旧值，所以紧跟在setTasks后的console.log(tasks)会打印旧的空数组，不代表state没有更新，只是取值时机不对。
• 最核心的错误是事件绑定写法错误：你在渲染Item组件时直接写了onClick = {completeTask(tasks.indexOf(item))}和delete = {deleteTask(tasks.indexOf(item))}，这种写法会在组件渲染阶段直接执行对应的方法，而不是点击时才触发。刚新增的任务在渲染时就被删除逻辑清空了，自然看不到新增内容。你需要用箭头函数包裹，改成点击时才执行：

// 用map的第二个参数直接取索引，避免indexOf的性能问题和匹配错误
{tasks.map((item, index) => 
  <Item 
    num={index} 
    text={item.content} 
    completed={item.completed} 
    onClick={() => completeTask(index)} 
    delete={() => deleteTask(index)}
  />
)}

• 额外的bug修复：你写的deleteTask方法中splice用法有误，splice(e)会删除从索引e开始的所有后续元素，需要改成splice(e, 1)，仅删除当前选中的单条任务：

const deleteTask = (e) => {
  let newTask = tasks.slice();
  newTask.splice(e, 1);
  setTasks(newTask);
}

关于useEffect的说明 #

这个问题和useEffect完全无关。
useEffect的核心作用是处理React组件的副作用逻辑，常见使用场景包括：

• 发送网络请求
• 手动操作DOM元素
• 订阅/取消订阅事件、定时器这类异步逻辑
• 监听指定状态的变化，在状态更新后执行对应逻辑
  比如你想要在tasks更新后打印最新的tasks值，就可以借助useEffect实现：

import React, {useState, useEffect} from 'react';

// 组件内添加以下代码
useEffect(() => {
  console.log('最新的tasks值：', tasks)
}, [tasks])

只要把要监听的状态放到useEffect第二个参数的依赖数组里，useEffect就会在依赖项发生变化后执行回调，此时拿到的就是最新的state值。

内容的提问来源于stack exchange，提问作者jerry