网页在浏览器上一次正确显示，但刷新页面后，数据消失了，我在控制台看到的只是一个空对象。但是，通过查看我的 Redux DevTools，我可以看到有效负载进入我的操作，并且我的 reducer 中的状态在每次刷新后都会更新。所以看起来我的状态实际上在每次刷新后都会更新，但我无法确定为什么刷新后数据没有到达我的控制台。
只有重新保存组件才能让数据再次到达我的浏览器。
【问题讨论】：
标签： javascript reactjs redux
console.log(stockData); 只会在你的组件第一次挂载时被调用，因为fetchStock() 只会在第一次挂载时被调用。你的 useEffect 有一个空的依赖数组，这将导致它只被调用一次。来自docs：
你想运行一个效果并且只清理一次（在挂载和卸载时），你可以传递一个空数组（[]）作为第二个参数。这告诉 React 你的效果不依赖于任何来自 props 或 state 的值，所以它永远不需要重新运行。这不是作为特殊情况处理的——它直接遵循依赖项数组的工作方式。
如果您打算在每个渲染上运行效果，请删除依赖数组，或者更好的是，让它依赖于 stockData，我认为这就是您所追求的。
也有可能（因为您提到浏览器刷新无论如何都会重新安装您的组件）您处于某种竞争状态，即在首次安装组件之前尚未在商店中填充 stockData。使 useEffect 依赖于 stockData 也解决了这种情况。如果是这种情况，您可能应该添加一个保护子句，以便在 stockData 可用之前不访问您的 API。
编辑：附加说明，您是在异步操作之后执行状态更新。这可能会导致 React 中的内存泄漏。我建议您考虑向您的 useEffect 添加一个清理函数，该函数设置一个中止标志并以此为条件更新您的状态。我通常会执行以下操作。
useEffect(() => {
let aborted = false;
const doSomethingAsync = async (theStateData) => {
const result = await myAPICall(theStateData);
if (result.flag && !aborted) {
setSomeState(result.value);
}
};
if (myState) {
doSomethingAsync(myState);
}
return () => {
aborted = true;
};
}, [myState]);
【讨论】：