时间戳

首页 > 解决方案 > 尝试访问以前的道具值时出现无效的钩子错误

reactjs - 尝试访问以前的道具值时出现无效的钩子错误

问题描述

我有以下代码。如果值发生变化，我希望我的日志触发。

const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

const App = (props) => {
  useEffect(() => {
    const previousValue = usePrevious(props.value)
    if (previousValue !== props.value) {
     console.log('fire')
    };
  }, []);

  return <div />
}

出于某种原因，我收到此错误：“无效的钩子调用。只能在函数组件的主体内部调用钩子。”

我不确定为什么。难道我做错了什么？

标签： reactjsreact-hooks

解决方案

我有同样的问题。我相信错误是这一行： const previousValue = usePrevious(props.value)在你的情况下不能在钩子（useEffect）中使用。

如果您将该行移到 useEffect 挂钩的上方和外部，它应该会为您修复它。

https://reactjs.org/warnings/invalid-hook-call-warning.html#break-the-rules-of-hooks

推荐阅读