React中如何依据数组值将state对象对应键值设为true？

你的推测没错，setState确实是异步的，而且在批量更新场景下，每次调用setDayValue时，闭包里捕获的dayValue都是初始状态的对象——这就导致循环里的多次更新会互相覆盖，最终只有最后一次修改生效。

正确做法：一次性构建目标状态再更新 #

不要多次调用setState，先把需要修改的状态一次性构建完成，再调用一次setDayValue即可：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [dayValue, setDayValue] = useState({
    monday: false,
    tuesday: false,
    wednesday: false,
    thursday: false,
    friday: false,
    saturday: false,
    sunday: false,
  });
  const arrayDays = ['monday', 'wednesday', 'saturday'];

  useEffect(() => {
    // 复制原状态对象，避免直接修改状态
    const updatedDayValue = { ...dayValue };
    // 遍历目标数组，把对应键设为true
    arrayDays.forEach(day => {
      if (updatedDayValue.hasOwnProperty(day)) {
        updatedDayValue[day] = true;
      }
    });
    // 一次性更新状态
    setDayValue(updatedDayValue);
  }, [arrayDays]); // 依赖arrayDays，数组变化时重新执行

  // ...组件其他逻辑
}

另一种简洁写法：用reduce生成更新对象 #

如果想更简洁，可以用reduce把arrayDays转换成需要修改的键值对，再和原状态合并：

useEffect(() => {
  const dayUpdates = arrayDays.reduce((acc, day) => {
    acc[day] = true;
    return acc;
  }, {});
  // 用函数式更新，确保基于最新状态修改
  setDayValue(prevState => ({ ...prevState, ...dayUpdates }));
}, [arrayDays]);

原代码无效的原因 #

原循环里每次调用setDayValue({...dayValue, [key]: true})，这里的dayValue始终是初始的全false对象——因为useEffect的闭包捕获的是初始状态，而setState的异步更新不会立刻修改当前作用域里的dayValue变量。所以多次调用后，每次都是在初始对象上改一个键，最后只有最后一次的修改会保留下来。

如果非要用循环更新（不推荐，会触发多次状态更新），可以用函数式更新，每次基于前一次的状态修改：

useEffect(() => {
  arrayDays.forEach(day => {
    setDayValue(prevState => ({
      ...prevState,
      [day]: true
    }));
  });
}, [arrayDays]);

这种方式虽然能得到正确结果，但会触发多次状态更新，性能不如一次性更新，所以优先推荐前面的一次性构建方案。

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