reactjs - React Hooks useEffect 在路由更改时再次调用

Question

完整代码在这里：https ://codesandbox.io/s/poliished-sea-krlff

主要问题是 useEffect 在路由更改时再次调用。

1. 通过以下方式从 Hooks 主页面转到员工页面：props.history.push('/employee');
2. 通过以下方式从 Employee 页面返回 HooksMain 页面： props.history.push('/');
3. 这会再次触发 useEffect 和另一个服务调用，尽管它取决于参数“test”。

详情如下：

第一个功能组件：

import React, {
  useState,
} from 'react';

function HooksMain(props) {
  const [test, setTest] = useState('');

  useEffect(() => {
    console.log('test', test);
  }, [test]);

   const redirectToNewPage = () => {
    props.history.push('/employee');
  };

return (
//Return something
)
}

当我从 Employee 页面重定向回 HooksMain 时，useEffect 再次被触发。在我的原始代码中，它触发了我不想要的 Web 服务调用。它继续拨打额外的服务电话。

请求帮助！

标签： reactjsreact-hooks