React useState状态更新异常及JS函数return问题咨询

问题1：两种setCheckboxState调用方式的差异原因 #

第一种代码：

const selectCheckbox = (e: boolean, id: number) => {
  let updatedList = list.map((item) => {
    if (id === item.id) {
      return {
        ...item,
        isChecked: e,
      };
    }
    return item;
  });

  setCheckboxState(updatedList);
};

第二种代码：

const selectCheckbox = (e: boolean, id: number) => {
  setCheckboxState((prev) => {
    let updatedList = prev.map((item) => {
      if (id === item.id) {
        return {
          ...item,
          isChecked: e
        };
      }
      return item;
    });
    return updatedList;
  });
};

原因分析 #

第一种写法的核心问题是闭包捕获的state值并非实时最新。React的state更新是异步批量执行的，当你在事件处理函数里直接用组件当前渲染时捕获的list（旧state值）生成新列表，短时间内多次触发的话，每次拿到的list都是同一个旧版本，导致每次更新都是基于旧列表修改单个项，最终只有最后一次修改会覆盖生效，表现为只能选中一个复选框。

而第二种写法用了React的函数式state更新：给setCheckboxState传入回调函数，React会自动把当前最新的state值作为参数（prev）传给这个回调，每次更新都基于最新的state来生成新列表，确保所有修改都能正确累积，自然就能实现正常的多选功能。

问题2：第二个代码片段中三个return的作用 #

三个return的作用各不相同，并非都返回给父函数：

• 最内层的return { ...item, isChecked: e }和return item：这是Array.map()回调函数的返回值，用来生成新数组的每一项，返回给map函数，和外层的setCheckboxState、selectCheckbox无关。
• 中间的return updatedList：这是setCheckboxState接收的回调函数的返回值，返回给React的state更新机制，这个值会成为新的checkboxState。
• 外层的selectCheckbox是事件处理函数，没有显式返回值，不需要返回内容给任何父函数。

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