Redux Store值作为Props传递给组件时为空的问题求助

核心问题：Redux的dispatch是同步执行的，但组件重新渲染是异步的——dispatch完成后store状态确实更新了，但当前组件里通过useSelector拿到的storeSimulationSelProd等变量，还是当前渲染周期的旧值，所以你在dispatch之后立刻用这些值渲染新组件，自然传过去的是空或者旧数据。

给你两种解决思路，优先用第一种：

方案一：直接用dispatch时的原始值（最简单高效） #

你要更新到store里的simulationSelProd、apiProductsData这些变量，本身就是最新的有效数据，完全没必要等store更新后再通过useSelector取一遍。直接把这些原始变量作为Props传给ResultsCard就行：

const addNewPanel = async () => {
    console.log(simulationSelProd)
    console.log(apiProductsData)
    console.log(updatedInput)
    console.log(updatedResponse)

    dispatch(updateResultsCard({simulationSelProd, apiProductsData, updatedInput, updatedResponse}))

    // 这里直接用原始变量，不用store里的旧值
    const newPanel = (
        <Panel header={"Simulation " + ((panels.length)+1)} key={(panels.length) + 1}>
            <ResultsCard 
                options={dropdownProducts} 
                selectedProduct={simulationSelProd} 
                productsData={apiProductsData} 
                inputData={updatedInput} 
                response={updatedResponse} 
                showSendToResultTab={true} 
                showData={true}
            />
        </Panel>
    );
    const updatedPanels = [...panels, newPanel];
    setPanels(updatedPanels)
    dispatch(setSimulation({selectedProduct, updatedPanels}))
}

这个方案不用依赖组件重新渲染，直接用你手头的最新数据，完全避免滞后问题。

方案二：监听store状态变化后再渲染组件（适合必须依赖store的场景） #

如果你的业务逻辑必须依赖store更新后的状态（比如后续其他逻辑要读取这个store值），可以用useEffect监听store里的状态变量，当它们更新后再创建新组件：

import { useRef, useEffect } from 'react';

// 用ref标记是否是主动触发的添加操作，避免初始渲染就执行
const shouldAddPanel = useRef(false);

const addNewPanel = async () => {
    shouldAddPanel.current = true;
    // 先把数据更新到store
    dispatch(updateResultsCard({simulationSelProd, apiProductsData, updatedInput, updatedResponse}))
}

// 监听store状态变化，状态更新后再添加panel
useEffect(() => {
    if (shouldAddPanel.current) {
        const newPanel = (
            <Panel header={"Simulation " + ((panels.length)+1)} key={(panels.length) + 1}>
                <ResultsCard 
                    options={dropdownProducts} 
                    selectedProduct={storeSimulationSelProd} 
                    productsData={storeApiProductsData} 
                    inputData={storeUpdatedInput} 
                    response={storeUpdatedResponse} 
                    showSendToResultTab={true} 
                    showData={true}
                />
            </Panel>
        );
        const updatedPanels = [...panels, newPanel];
        setPanels(updatedPanels)
        dispatch(setSimulation({selectedProduct, updatedPanels}))
        // 重置标记，避免重复触发
        shouldAddPanel.current = false;
    }
}, [storeSimulationSelProd, storeApiProductsData, storeUpdatedInput, storeUpdatedResponse, panels, dropdownProducts, selectedProduct])

这种方式会等store状态更新、组件重新渲染后，再执行添加panel的逻辑，保证拿到的是最新的store值。

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