useEffect 缺少依赖项：'user' [重复]

Question

我正在寻找某个查询字符串，当它在页面加载时传递时，我需要将我的用户状态更新为“高级”。我有：

  useEffect(() => {
    const queryString = require('query-string');
    const values = queryString.parse(window.location.search);
    console.log('before' + user.premium);
    if (values.premium !== ''){
      setUser({...user, premium: true});
    }
    console.log('after' + user.premium);
  }, []);

我正在使用 React 功能组件，我的用户是一个包含许多其他值的对象，除了“高级”键。据我了解，传递空数组 [] 将导致 useEffect 仅在页面加载时运行。但是，这样做会出现错误：

React Hook useEffect has a missing dependency: 'user'.。但是，当我在该数组中包含 user 时，页面会不断重新加载（因为我正在更新它的值）。我也尝试过传入setUser，但没有成功。

Answer 1

您可以将对象的属性作为useEffect 的依赖项传递。我创建了一个有效的sandbox here。

另外，不要太担心 eslint 规则 react-hooks/exhaustive-deps，将其视为更多指南，如果它促使您添加您不添加的依赖项，请不要害怕添加 eslint-disable-next-line不认为应该添加。

import React, { useEffect, useState } from "react";

export default function App() {
  const [user, setUser] = useState({ count: 0, premium: false });

  useEffect(() => {
    console.log("when component mounts");
  }, []);

  useEffect(() => {
    console.log("when component updates");
  });

  useEffect(() => {
    console.log("when premium changes");
  }, [user.premium]);

  return (
    <div>
      <p>Count: {user.count}</p>
      <p>Premium: {user.premium}</p>
      <button
        onClick={() => setUser((prev) => ({ ...prev, count: prev.count + 1 }))}
      >
        Increment Count
      </button>
      <button
        onClick={() => setUser((prev) => ({ ...prev, premium: !prev.premium }))}
      >
        Toggle premium
      </button>
    </div>
  );
}