React useEffect 挂钩缺少依赖项警告

Question

小问题，当我尝试在我的应用程序中使用 useEffect 时，如何修复收到的警告。这是我的代码：

 const userUrl = `${process.env.REACT_APP_API_URL}/${id}`;


const [newUser, setNewUser] = useState({
    name: "",
    email: "",
    status: "",
    gender: "",
  });

  useEffect(() => {
    if (id) {
      const getUser = async () => {
        try {
          const response = await axios.get(userUrl);
          const apiData = response.data.data;
          setNewUser({
            ...newUser,
            name: apiData.name,
            email: apiData.email,
            status: apiData.status,
            gender: apiData.gender,
          });
        } catch (err) {
          console.error(err);
        }
      };
      getUser();
    } else {
      setNewUser({
        ...newUser,
        status: "active",
        gender: "male",
      });
    }
  }, [userUrl, id]);

这是完整的警告消息：React Hook useEffect has a missing dependency: 'newUser'. Either include it or remove the dependency array. You can also do a functional update 'setNewUser(n => ...)' if you only need 'newUser' in the 'setNewUser' call

我尝试在 useEffect 挂钩的第二个参数中添加 newUser，但随后出现最大深度错误，所以如果有人知道如何解决这个问题，我将不胜感激。

Answer 1

问题

这里的问题是您在 useEffect 回调中引用 newUser 状态，从而使其成为依赖项。但是你不能无条件地更新任何依赖值，因为这会导致你在添加 newUser 时看到的渲染循环状态为依赖项。

解决方案

您应该在状态更新程序上使用 functional state update，这样您就可以删除外部 newUser 依赖项。功能更新将状态更新排入队列并将先前的状态值传递给可用于计算下一个状态值的回调。

useEffect(() => {
  if (id) {
    const getUser = async () => {
      try {
        const response = await axios.get(userUrl);
        const { email, gender, name, status } = response.data.data;
        setNewUser(newUser => ({ // <-- previous state
          ...newUser,            // <-- shallow merge
          name,
          email,
          status,
          gender,
        }));
      } catch (err) {
        console.error(err);
      }
    };
    getUser();
  } else {
    setNewUser(newUser => ({     // <-- previous state
      ...newUser,                // <-- shallow merge
      status: "active",
      gender: "male",
    }));
  }
}, [userUrl, id]);

React useEffect 挂钩缺少依赖项警告

React useEffect hook has a missing dependency warning

reactjs

react-hooks

use-effect

use-state

问题

解决方案