在 react 中 使用 useEffect 报错，怎么解决？

Question

在 react 中 使用 useEffect 报错：React Hook useEffect has missing dependencies: 'status' and 'token'. Either include them or remove the dependency array react-hooks/exhaustive-deps，怎么解决？

我在useEffect钩子中调用接口

function ChangePassword(props) {
  const token = props.match.params.token;
  const [state, setState] = useState({
    password: '',
    confirmPassword: '',
  });
  const [status, setStatus] = useState({
    loaded: false,
    auth: false,
  });

  useEffect(() => {
    let { auth } = status;

    axios
      .get(`http://localhost:2606/api/hostler/changepassword?token=${token}`)
      .then((res) => {
        console.log('res', res);
        auth = res.status === 202;
      })
      .then(() => setStatus({ auth, loaded: true }))
      .catch((err) => console.log('err', err));
  }, []);
  return (
      // code
  );
}

但是 react 提示如下警告：

React Hook useEffect has missing dependencies: 'status' and 'token'. Either include them or remove the dependency array react-hooks/exhaustive-deps

也添加status到依赖数组将导致无限循环，因为setStatus在 useEffect 内部调用

Answer 1

不是报错，是警告
提醒你没有给 effect 添加 'status' 和 'token' 的依赖，因为这样的话 'status' 和 'token' 变量改变之后，不会触发 effect 执行
你需要考虑一下，这个是不是合理的

Answer 2

问题：
如果 不依赖status
let { auth } = status这句就永远拿到的是初始值。
否则
会套娃

方案一：
我的建议是把axios封装到usecallback，依赖status

然后useeffect里面调用这个callback

方案二：
仔细看你的axios的业务逻辑，实际上并不需要status的值，所以let { auth } = status这句可以不要。

Answer 3

function ChangePassword(props) {
  const token = props.match.params.token;
  const [state, setState] = useState({
    password: '',
    confirmPassword: '',
  });
  const [status, setStatus] = useState({
    loaded: false,
    auth: false,
  });

  useEffect(() => {
    let { auth } = status;

    axios
      .get(`http://localhost:2606/api/hostler/changepassword?token=${token}`)
      .then((res) => {
        console.log('res', res);
        auth = res.status === 202;
      })
      .then(() => setStatus({ auth, loaded: true }))
      .catch((err) => console.log('err', err));
  }, [status,token]);
  return (
      // code
  );
}