useEffect infinite l oop с аксиомами - PullRequest
Новая
       100

useEffect infinite l oop с аксиомами

0 голосов
/ 05 мая 2020

Я застрял в бесконечном l oop in 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;

1 Ответ

0 голосов
/ 05 мая 2020

Каждый раз, когда компонент отрисовывается, он запускает ваш useEffect. Ваш useEffect вызывает setUsersDB, который обновляет состояние, что вызывает повторную визуализацию, которая запускает 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])
...