useSelector 仅在 Redux 存储、React 路由器中重新渲染后才能正确触发

Question

我有两个页面的情况。第一个是主页，右边的相应呈现。根据 redux 状态渲染正确的组件，并且基本上可以正常工作。没有 if 语句的简短示例：

 const renderRightComponent = () => {
    return <ComponentOnRightSide />;
  };

和

return (
    <div>
      <ComponentOnLeftSide />
      {renderRightComponent()}
    </div>
  );

单击 ComponentLeftStide 上的按钮时，它会向 redux 存储分派一个操作。它被正确存储（根据 Chrome 的 redux 开发工具）。但是，我不知何故需要设法在调度操作后重新呈现正确的组件 - 我对如何做到这一点有点迷茫 - 可能缺少正确的关键字 - 有人有想法吗？

再说明一点：我在左侧组件中使用 material UI 中的 DatePicker。

 onChange={(newValue) => {
            setValue(newValue);
          }}

这是 get 分配给 react-redux 的值。在正确的组件中，我使用 useSelector:

const [date, setDate] = useState(
    useSelector((state) => state.date)
  );

然后我将借助以下函数在 return 语句中调用这个函数：

 const getTitle = () => {
    if (date) {
      return moment(date).format("D MMM, YYYY");
    }

    return "";
  };

如果我 console.log 日期它不会在正确的组件中更改。

Answer 1

您共享的代码未正确访问 Redux 状态。

const [date, setDate] = useState(
  useSelector((state) => state.date)
);

React 状态只会在安装组件时初始化一次。我怀疑上面的代码没有抛出 React hooks 警告的原因是 useSelector 函数仍然在每个渲染周期被调用（ 所以它没有打破被有条件地调用的规则) 并忽略后续调用的结果。

要正确缓存本地副本，您需要将其拆分并使用 useEffect 挂钩更新缓存的 date 值。

示例：

const dateState = useSelector((state) => state.date);

const [date, setDate] = useState(dateState);

useEffect(() => {
  setDate(dateState);
}, [dateState]);

请记住，在 React 中通常考虑在本地复制状态 anti-pattern。直接消费 Redux 状态即可。

const date = useSelector((state) => state.date);

...

const getTitle = () => {
  return date ? moment(date).format("D MMM, YYYY") : "";
};

useSelector 仅在 Redux 存储、React 路由器中重新渲染后才能正确触发

useSelector only fires correctly after re-render in Redux store, React router

javascript

reactjs

react-router

redux