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 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狀態作為依賴項時看到的渲染循環。

解決方案

您應該在狀態更新器上使用功能狀態更新，以便您可以刪除外部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]);