React父组件props更新后，子组件(map渲染)更新滞后问题求助

我给子组件DashboardNextDays传递了包含worktypeData字段的data props，其中worktypeData.selected字段会动态变化。控制台在组件顶层打印data能看到最新值，但map循环内部打印的data却滞后一步。试过用useEffect监听data更新状态，问题依旧。

相关代码 #

子组件代码 #

// WorkTypeData类型定义
interface WorkTypeData {
    selected: WorkType;
    onClick: (worktype: WorkType) => void;
    buttonLink: string;
}

interface DashboardNextDaysProps {
    data: OfficeOccupancyCardData[];
}

const DashboardNextDays: React.FunctionComponent<DashboardNextDaysProps> = ({ data }) => {
    // 此处打印data能显示最新值
    console.log(data);

    return (
        <HorizontalGridSlide className="DashboardNextDays" colSize={286} gap={16} pageSlide>
            {data.length > 0 &&
                data.map((day, i) => {
                    // 此处打印的data值滞后一步
                    console.log(day);
                    return <OfficeOccupancyCard key={generateKey(i)} data={day} />;
                })}
        </HorizontalGridSlide>
    );
};

父组件原逻辑（导致问题） #

// useEffect内setNextDaysData的返回代码
return newNextDaysData ? newNextDaysData : [];

父组件修改后逻辑（解决问题） #

return newNextDaysData ? [...newNextDaysData] : [];

解决原理 #

React组件触发重渲染的核心依据是状态/ props的引用变化，它会对新旧props做浅比较：

• 原代码中，newNextDaysData是直接返回的原数组引用。哪怕你修改了数组内部元素的selected字段，数组本身的引用没改变。React浅比较后会判定data props没有变化，因此不会触发DashboardNextDays及其子组件的完整重渲染，导致map循环里的打印和视图都停留在旧值。
• 修改后用[...newNextDaysData]解构生成了一个全新的数组实例，数组的引用发生了变化。React检测到data props的引用更新，就会触发组件重渲染，此时map循环里的day会取到最新的元素值，打印和视图也就同步更新了。

本质就是：React靠引用变化识别数据更新，解构数组生成新引用，让React感知到数据确实发生了变化，从而触发正确的重渲染。

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