反应钩子被无序调用

Question

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

类型错误：无法读取未定义的属性"时间戳">

此错误指向依赖项数组中最后一个 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])

Answer 1

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

根据 React 文档：

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

这意味着所有useEffect调用都将在组件中的其他函数(包括传递给useMemo的函数(之后发生，即使useEffect放在组件的较早位置也是如此。

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