redux 和 useEffect 的交互答案

【问题标题】：Interaction between redux and useEffectredux 和 useEffect 的交互
【发布时间】：2020-08-23 20:01:35
【问题描述】：

我正在研究一个将一些数据人为地加载到组件的函数，即。根据上传的数据重新创建页面显示。我在调用 useEffect 时遇到问题。代码如下：

const funcA = (props) => {
    let a = [1, 2, 3];
    let b = [2, 3];
    setSelected(a);
    setParam(b);
    return (
        <div>...</div>
);
}

const funcB = (props) => {
    useEffect(
        () => {
            setParam([]);
        },
        [props.selected]
    );
    return (<div>...</div>);
}

setSelected() 和 setParam() 是修改我的 redux 存储的操作。现在，当我在funcA 中使用setSelected() 更改selected 时，会在funcB 中调用useEffect，它会根据selected 值修改param 数据。我认为这应该不是问题，因为我在调用setSelected 之后调用了setParam()，但似乎useEffect 在setParam() 之后被执行。

长话短说，这是我希望他们执行的顺序：

setSelected()
useEffect() （因为选择的变化）
setParam()

但它们是按以下顺序执行的：

setSelected()
setParam()
useEffect() （因为选择的变化）

感谢任何帮助。谢谢！！

【问题讨论】：

你能显示funcA 和funcB 的调用位置吗？
让你的动作异步，因为，当任何动作需要时间时，javascript就会消失，请看链接-Async Actions | Redux，你也可以看这个教程-Async Actions
@RedBaron funcA 只是一个按钮，而 funcB 在不同的页面上呈现一个表格（它是一个单页面应用程序。我的意思是前一个组件已卸载）。因此，当用户单击 funcA 按钮时，他将被重定向到包含来自 funcB 的表以及加载的数据（我们在商店中修改的内容）的页面
为什么要将setParam设置为b，然后立即将其设置为用户效果中的空数组？
@RedBaron useEffects 在通常情况下设置参数的默认值，但在这里我想使用 funcA 重新创建一个包含一些数据的页面。另外我不希望将其设置为空数组（默认值），我希望将其设置为来自我加载的数据的 [2, 3]。

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

在反应世界中，您通常不应依赖调用 setSomething() 函数的顺序。

React“收集”状态更新调用，并决定更新状态的最有效方式。

不要考虑“调用顺序”，而应该考虑“如果状态 A 是 X，状态 B 应该是什么？”。
而不是“如果用户点击改变状态”，想想“用户想要什么所以得到/看到？”。

不好：

setSelected()
useEffect()（因为选中的变化）
setParam()

更好：

setSelected()
useEffect()（调用 setParam()，因为选择的改变）
useEffect()（调用 setParam()，因为……为什么？）

您可能需要重新考虑，并稍微改变一下您的状态结构。

【讨论】：

在尝试了几件事之后，我做了这个并删除了 useEffect() 并更改了我更新变量的位置。非常感谢@kicia