useEffect, вызывающее бесконечный цикл рендеринга - PullRequest
Новая
       87

useEffect, вызывающее бесконечный цикл рендеринга

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

Я использую реагирование useEffect для получения данных из моего бэкэнда, но оно безостановочно рассылает мой терминал тем же сообщением.

Мой код 

function DataFetching() {

    let [posts, setPosts] = useState([]); 

    useEffect(() => {
        axios.get('http://localhost:8080/zoom')
            .then(res => {
                setPosts(res.data);
            })
            .catch(err => {
                console.log(err)
            })
    })

Спам-сообщение попасть на терминал 

Executing (default): SELECT `id`, `subject`, `MEETINGID`, `Password`, `createdAt`, `updatedAt` FROM `data` AS `data`;```

1 Ответ

2 голосов
/ 04 мая 2020

setPosts() вызывает повторное рендеринг DataFetching, и поскольку ваш useEffect() не объявляет список зависимостей, он оценивает эффект после каждого рендеринга, так что вы, по сути, закодировали асинхронный бесконечный l oop.

Ваш эффект зависит только от setPosts(), поэтому вы должны объявить это как единственную зависимость. Или, признавая, что setPosts() уже запомнен React, не объявляйте никаких зависимостей вообще: 

useEffect(() => {
  axios.get('http://localhost:8080/zoom').then(res => {
    setPosts(res.data);
  }).catch(err => {
    console.log(err);
  });
}, [/*setPosts*/]);
...