Почему я не могу установить массив в useEffect?

Question

Я изучаю React и пытаюсь написать асинхронный хук.Использование setResult внутри useEffect, похоже, не работает.Когда я попытался отобразить результат, ничего не было, поэтому я добавил журналы консоли, чтобы посмотреть, что происходит.Функция setter в хуке useState, похоже, ничего не делает.Я следил за этим видео для некоторых указаний, и мой код не сильно отличается.

У меня есть следующий компонент:

import React, { useState, useEffect } from 'react'

const Search = () => {
  const [search, setSearch] = useState('')
  const [query, setQuery] = useState('')
  const [result, setResult] = useState([])

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(
          `https://api.spotify.com/v1/search?q=${encodeURIComponent(
            query
          )}&type=track`,
          {
            method: 'GET',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
              Authorization: 'Bearer ' + auth.access_token
            }
          }
        )
        const json = await response.json()
        console.log({ json })
        console.log(
          json.tracks.items.map(item => {
            return item.id
          })
        )
        setResult(
          json.tracks.items.map(item => {
            return item.id
          })
        )
        console.log({result})
      } catch (error) {
        console.log(error)
      }
    }

    if (query !== '') {
      fetchData()
    }
  }, [query])

  return (
    <div>
      <input
        value={search}
        placeholder='Search...'
        onChange={event => setSearch(event.target.value)}
        onKeyPress={event => {
          if (event.key === 'Enter') {
            setQuery(search)
          }
        }}
      ></input>
      <br />
      {result.map(item => (
        <h3 key={item}></h3>
      ))}
    </div>
  )
}

export default Search

С console.log ({ json }), Я вижу ответ от сервера выглядит хорошо .

console.log(
    json.tracks.items.map(item => {
        return item.id
    })
)

Приведенный выше вывод консоли также выглядит хорошо .

setResult(
  json.tracks.items.map(item => {
    return item.id
  })
)
console.log({result})

Почему result пусто ?

РЕДАКТИРОВАТЬ: Спасибо Патрик и Талгат.Теперь я понимаю.Итак, когда я console.log за пределами useEffect, я мог видеть, что result настроен правильно.Затем я понял, что мне не хватает ссылки на {item} в моем рендере:

{result.map(item => (
  <h3 key={item}>{item}</h3>
))}

Теперь я вижу идентификаторы, отображаемые на странице.Спасибо за вашу помощь.

Answer 1

setTimeout(()=>{
console.log(result);
},0);

Пожалуйста, попробуйте это вместо console.log(result).Состояние установки не обновляется, как только вы вводите значение через установщик (на вашей стороне setResult).Так что для этого нужна задержка.