【问题标题】：React useEffect hook has a missing dependency warningReact useEffect hook 缺少依赖警告
【发布时间】：2021-12-07 11:28:46
【问题描述】：

快速提问，当我尝试在我的应用程序中使用 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，但是我得到了最大深度错误，所以如果有人知道如何解决这个问题，我将不胜感激。

【问题讨论】：

尝试使用回调方法setNewUser(prev => ({...prev, YOUR_UPDATES}))
成功了，谢谢

标签： reactjs react-hooks use-effect use-state

【解决方案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]);

【讨论】：