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功能组件，我的用户是一个对象，除了“ premium”键外，还包含许多其他值。据我了解，传递空数组[]将导致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>
  );
}

useEffect缺少依赖项：'用户'

1 个答案: