React中useEffect内更新state数组元素select属性的求助

要实现将weekdays中fullName存在于newData的元素select设为true的需求，可以按照以下步骤修改你的useEffect代码：

核心思路 #

1. 将newData转为Set结构，大幅提升查找效率（从数组的O(n)变为Set的O(1)）。
2. 使用React的函数式state更新，确保获取到最新的weekdays状态。
3. 遍历原数组，对每个元素做浅拷贝并根据匹配结果修改select属性，保证state的不可变性。

修正后的代码 #

useEffect(() => {
  if (data?.length > 0) {
    // 转为Set优化查找
    const targetDays = new Set(data);
    // 函数式更新state
    setWeekdays(prevWeekdays => 
      prevWeekdays.map(dayItem => ({
        // 浅拷贝原元素，避免修改原state对象
        ...dayItem,
        // 匹配则设为true，否则保留原有select值
        select: targetDays.has(dayItem.fullName) ? true : dayItem.select
      }))
    );
  }
}, [data]);

可选调整 #

如果你希望非匹配项的select强制设为false（而非保持原有值），可以简化为：

useEffect(() => {
  if (data?.length > 0) {
    const targetDays = new Set(data);
    setWeekdays(prevWeekdays => 
      prevWeekdays.map(dayItem => ({
        ...dayItem,
        select: targetDays.has(dayItem.fullName)
      }))
    );
  }
}, [data]);

关键说明 #

• 用Set而非直接遍历数组查找：当newData元素较多时，能显著提升性能。
• 函数式更新prevWeekdays => ...：因为state更新依赖当前state的状态，这种方式可以避免闭包导致的旧state问题。
• 浅拷贝...dayItem：严格遵循React的state不可变原则，避免直接修改原数组元素导致的渲染异常。

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