时间戳

首页 > 解决方案 > redux 和 useEffect 的交互

javascript - redux 和 useEffect 的交互

问题描述

我正在研究一个人为地将一些数据加载到组件的功能，即。根据上传的数据重新创建页面显示。我在调用 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 存储的操作。现在，当我更改selectedusing setSelected()in 时funcA，将调用 useEffect根据值funcB修改数据。我认为这不应该是一个问题，因为我在调用后调用但它似乎在.paramselectedsetParam()setSelecteduseEffectsetParam()

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

  1. 设置选择（）
  2. useEffect() （因为选择的变化）
  3. 设置参数（）

但他们按以下顺序执行：

  1. 设置选择（）
  2. 设置参数（）
  3. useEffect() （因为选择的变化）

任何帮助表示赞赏。谢谢！！

标签： javascriptreactjsreact-reduxreact-hooks

解决方案

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

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

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

不好：

  1. 设置选择（）
  2. useEffect() （因为选择的变化）
  3. 设置参数（）

更好的：

  1. 设置选择（）
  2. useEffect()（调用 setParam()，因为选择的改变）
  3. useEffect()（调用 setParam()，因为……为什么？）

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

推荐阅读