Что не так с моим кодом useEffect и почему моя переменная состояния пуста?

Question

У меня проблема, и я не уверен, в чем ее причина.

Итак, я сделал выборку с помощью внешнего API и хочу распечатать некоторую информацию из API. Я зарегистрировал данные и переменную состояния, чтобы увидеть, возвращают ли они данные. Моя проблема в том, что я не получаю никаких данных из переменной состояния в консоли. Когда я регистрирую его в консоли, он показывает только пустой массив. Но я получаю данные в консоли, когда регистрирую console.log (данные).

Когда я удаляю пустой массив в конце useEffect, он работает в консоли, но это бесконечный l oop. То же самое происходит, если я помещаю переменную состояния в пустой массив.

Кто-нибудь знает, в чем может быть проблема?

export const Communication = () => {
  const [article, setArticle] = useState([])

  useEffect(() => {
    fetch('https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/articles', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Access-Token': accessToken,
        'Client-Secret': clientSecret
      }
    })
      .then((res) => res.json())
      .then((data) => {
        setArticle(data)

        console.log('json', data)
        console.log('article', article)
      })
  }, [])

Answer 1

Подумайте, как работает JavaScript. С помощью этого оператора вы объявляете две переменные:

const [article, setArticle] = useState([])

Если вы подумаете о article, никакой вызов внешней функции не сможет присвоить article новому значению. Это не только потому, что это const; даже если был использован let, внешняя функция не смогла бы его изменить; у нас нет ничего похожего на указатели. Это ничем не отличается от того, что происходит здесь:

function a() {
  let foo = 1;
  changeFoo(2);
}

function changeFoo(newValue) {
  // How do I change `foo` inside of function `a`? Spoiler, I cannot!
}

Точно так же, вызов setArticle не имеет возможности обновить значение статьи . React работает не так. Скорее всего, в следующий раз, когда ваш компонент вызовет useState, он получит новое значение. Следовательно, вот почему:

setArticle(data);
console.log(article);

... будет записывать старое значение article. Это не означает, что setArticle не работает; это означает, что вы ожидаете, что React будет слишком волшебным. article будет присвоено новое значение при следующем вызове useState при следующем рендеринге. Если вы хотите регистрировать изменение состояния статьи, вам нужно сделать что-то вроде:

export const Communication = () => {
  const [article, setArticle] = useState([])
  console.log('article', article);

  useEffect(() => {
    fetch('https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/articles', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Access-Token': accessToken,
        'Client-Secret': clientSecret
      }
    })
      .then((res) => res.json())
      .then(setArticle)
  }, [])

  // ...
}