如何解决React Hook useEffect提示缺少依赖history的报错问题

方案1：将history加入依赖数组（最推荐） #

这是符合React Hook规则的标准处理方式，直接把useEffect内部用到的外部变量加入依赖数组即可，代码修改如下：

useEffect(() => {
    const generateToken = async () => {
      try {
        const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });
        setCheckoutToken(token);
      } catch (error) {
        history.pushState('/');
      }
    }
    generateToken();
  }, [cart, history]); // 新增history到依赖数组

注意：如果你用的是React Router提供的history实例，它的引用是稳定的，不会导致useEffect频繁重复触发，完全不用担心额外执行的问题。如果是自定义的history对象，只要保证引用稳定即可。

方案2：确认不需要监听history变化时，可禁用该行ESLint规则 #

仅当你完全确认history引用变化也不需要重新执行这个useEffect的时候再用，只需要在依赖数组上方加规则禁用注释即可：

useEffect(() => {
    const generateToken = async () => {
      try {
        const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });
        setCheckoutToken(token);
      } catch (error) {
        history.pushState('/');
      }
    }
    generateToken();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cart]);

不推荐常规场景下使用这个方案，容易因为依赖遗漏导致闭包旧值问题。

额外注意点 #

你代码里写的history.pushState('/')如果是调用的原生window.history，需要注意原生pushState的参数要求：原生方法接收三个参数pushState(state, unused, url)，仅传一个路径的写法是错误的，应该改成history.pushState({}, '', '/')；如果是React Router提供的history实例，应该调用history.push('/')而非pushState方法。

内容的提问来源于stack exchange，提问作者stressOverflow