时间戳

首页 > 解决方案 > 如何使用 useEffect hook 来初始化 reducerstate

reactjs - 如何使用 useEffect hook 来初始化 reducerstate

问题描述

所以我的问题是我想使用一个函数来生成我的初始状态，然后在我的减速器中使用该生成的状态。

我的 App 组件函数之外有这个 StateGenerator() 函数，它返回一个大数组。

如果我这样写：

const [boardState, tileDispatchFn] = useReducer(
    tileReducer,
    StateGenerator()
  );

它可以工作，但是每次渲染都会执行 StateGenerator() 函数（这是正常的吗？？）尽管状态没有重置为初始状态（我猜这很好？？）

但是这些函数仍然会在每次渲染时执行，并且它会生成一个相当大的数组，如果我通过单击它来快速渲染它会中断

如果我这样写：

let initState = null;

useEffect(() => {
    initState = StateGenerator();
  }, []);

  const [boardState, tileDispatchFn] = useReducer(
    tileReducer,
    initState
  );

我收到这样的错误Cannot read property ... of null因为 useEffect 在渲染后执行

使用我的 StateGenerator() 函数生成初始状态的最简单方法是什么？最好的方法是什么？

标签： reactjsreact-hooks

解决方案

我认为最简单的方法是使用useReducer作为初始化函数的第三个参数。

使用减速器-const [state, dispatch] = useReducer(reducer, initialArg, init);

延迟初始化

您也可以懒惰地创建初始状态。为此，您可以传递一个init函数作为第三个参数。初始状态将设置为init(initialArg)。

它使您可以提取用于在 reducer 之外计算初始状态的逻辑。

我不知道你的状态是什么样的，但这就是它的使用方式。

const [boardState, tileDispatchFn] = useReducer(
  tileReducer,
  {              // <-- default initial board state
    // state keys with safe default values
  },
  StateGenerator // <-- state initializer function
);

推荐阅读