useEffect 無限循環與 axios

Question

盡管已嘗試清理 function，但我仍陷入 useEffect 的無限循環

我試圖將 [] 和 [usersDB] 作為 useEffect 的第二個參數傳遞，但它不起作用，因為 [] 使它只運行一次，這不是我正在尋找的行為（我希望它在每次更新后運行)

 const ListUsers = () => {
  const [usersDB, setUsersDB] = useState([]);

  useEffect(() => {
    const getUsers = async () => {
      const response = await axios
        .get("http://localhost:4000/contacts")
        .catch((error) => console.log(error.resp));
      setUsersDB(response.data);
    };
    getUsers();
  }); 

  console.log(usersDB);

  return (
    <div>
        <div>
          {usersDB.map((user, index) => (
            <CardUsers key={user._id} user={user} />
          ))}
        </div>
    </div>
  );
};

export default ListUsers;

Answer 1

每次組件呈現時，它都會運行您的useEffect 。 您的useEffect調用setUsersDB ，它更新 state，這會導致重新渲染，運行useEffect ...

您可以在useEffect的末尾添加一個值數組，它告訴useEffect僅在包含的任何值發生更改時才運行。 但是，如果您添加一個空數組，它會告訴useEffect只運行一次，而不會再運行一次，因為它所依賴的值沒有發生變化。 您提到您嘗試過這個，並且您希望useEffect在每次更新后運行。 每次更新什么？ 如果其他地方正在更新一些其他值，並且您希望useEffect依賴於該值，則將其粘貼到依賴項數組中。

  useEffect(() => {
    const getUsers = async () => {
      const response = await axios
        .get("http://localhost:4000/contacts")
        .catch((error) => console.log(error.resp));
      setUsersDB(response.data);
    };
    getUsers();
  }, [some updating value])