React无更新函数时如何更新状态数组？Redux状态重复填充求助

1. React中更新状态数组的正确方式 #

React（包括Redux）的状态都遵循不可变原则——绝对不能直接修改原状态对象或数组，必须返回新的引用。哪怕你没有使用useState这类状态更新函数，处理状态时也得遵守这条规则，否则会导致状态异常、渲染bug。

2. 解决storeHoursTime重复填充的问题 #

你现在的代码直接对Redux传入的storeHoursCardRecord里的对象执行push操作，这既违反了Redux状态不可变的要求，又因为组件每次渲染都会跑这段逻辑，导致数组被反复填充。

正确的做法是：

• 完全不修改原状态，而是创建新的数组和对象
• 用useMemo缓存处理后的结果，只在依赖数据变化时重新计算

示例代码：

import { useMemo } from 'react';

// 组件内部处理逻辑
const processedStoreHours = useMemo(() => {
  return props.storeHoursCardRecord.map(dayRecord => {
    // 获取当天的营业时间
    const dayHours = props.storeDetails.storeHoursMap[dayRecord.day];
    // 直接创建新的storeHoursTime数组，不修改原数组
    const storeHoursTime = [dayHours.openingTime, dayHours.closingTime];
    // 判断是否全天开放，直接计算新值
    const fullDayOpen = storeHoursTime.join() === ["00:00", "23:59"].join();
    
    // 返回全新的对象，展开原对象属性并覆盖需要更新的字段
    return {
      ...dayRecord,
      storeHoursTime,
      fullDayOpen
    };
  });
}, [props.storeHoursCardRecord, props.storeDetails]); // 仅当依赖变化时重新计算

这样处理后，只有当storeHoursCardRecord或storeDetails的数据发生变化时，才会重新生成处理后的数组，不会出现重复填充的问题。

3. 避免直接赋值fullDayOpen #

上面的代码已经解决了这个问题——通过对象展开语法创建新的对象，把计算好的fullDayOpen作为新属性传入，完全没有修改原状态对象，完美符合不可变原则。

如果是在Redux reducer中处理这个逻辑，同样要遵循不可变更新：

// Redux reducer示例
case 'UPDATE_STORE_HOURS':
  return {
    ...state,
    storeHoursCardRecord: state.storeHoursCardRecord.map(dayRecord => {
      const dayHours = action.payload.storeDetails.storeHoursMap[dayRecord.day];
      const storeHoursTime = [dayHours.openingTime, dayHours.closingTime];
      const fullDayOpen = storeHoursTime.join() === ["00:00", "23:59"].join();
      return { ...dayRecord, storeHoursTime, fullDayOpen };
    })
  };

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