Question

我正在学习React并试图编写一个异步钩子。在setResult中使用useEffect似乎无效。当我尝试呈现结果时，什么都没有，所以我添加了一些控制台日志记录以查看发生了什么。 useState挂钩中的setter函数似乎没有任何作用。我一直在关注this video以获得一些指导，但是我的代码并没有太大差异。

我有以下内容：

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 })，我看到the response from the server looks OK。

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

The above console output looks OK as well。

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

为什么是result empty？

编辑：谢谢Patrick和Talgat。我现在知道了。因此，当我console.log超出useEffect时，可以看到result设置正确。然后，我意识到我在渲染中缺少对{item}的引用：

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

现在，我在页面上看到了ID。感谢您的帮助。

Answer 1

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

请改用console.log(result)尝试此操作。通过setter（在setResult侧）插入值后，设置状态不会立即更新。为此，需要延迟。

为什么我无法在useEffect中设置数组？

1 个答案: