React 钩子被乱序调用答案

【问题标题】：React hooks being called out of orderReact 钩子被乱序调用
【发布时间】：2020-01-22 22:39:49
【问题描述】：

由于某种原因，useMemo 钩子似乎在 useEffect 钩子之前执行，就在它的正上方。我相信这是因为我收到了一个错误：

TypeError: 无法读取未定义的属性“时间戳”

此错误指向最后一个 useEffect 挂钩的依赖数组中的 datum.timestamp，并且每当 is_paused 从 false => true 更改时发生。

我看到的问题是 useMemo 钩子试图从一个空数组中获取一个项目，该数组应该由之前的 useEffect 设置。

我做了一些日志记录，确实，我在 useMemo 中看到了日志，但没有看到 useEffect。

const [position, setPosition] = useState(MAX_HISTORY - 1);
const [data, setData] = useState<ExData[]>(new Array(MAX_HISTORY).fill({ content: {} }));
const paused_data_ref = useRef<ExData[]>([]);

useEffect(() => {
  const listener = (d: ExData) => {
    const new_data = data.slice(1);
    new_data.push(d);
    setData(new_data);
  };
  addListener(props.event_key, listener);
  return () => {
    removeListener(props.event_key);
  };
});

useEffect(() => {
  paused_data_ref.current = is_paused ? [...data] : [];
  if (is_paused) {
    console.log('copy data array');
  }
}, [is_paused, data]);

const datum = useMemo(() => {
  if (is_paused)
    console.log({
      position,
      data: paused_data_ref.current[position],
      arr: paused_data_ref.current
    });
  return is_paused ? paused_data_ref.current[position] : data[MAX_HISTORY - 1];
}, [is_paused, position, data]);

useEffect(() => {...}, [datum.timestamp])

【问题讨论】：

标签： reactjs typescript react-hooks

【解决方案1】：

你是对的，传递给useEffect的函数是在传递给useMemo的函数之后调用的。

根据 React 文档：

传递给 useEffect 的函数将在渲染提交到屏幕后运行。

这意味着所有useEffect 调用都将发生在组件中的其他函数之后（包括传递给useMemo 的函数），即使useEffect 被放置在组件中的更早位置。

https://reactjs.org/docs/hooks-reference.html

【讨论】：

谢谢。我能够重构我的代码以使其正常工作。我没有意识到 useEffect 的行为与其他钩子不同。