1

我正在学习 React 并尝试编写一个异步钩子。使用setResultinside ofuseEffect似乎不起作用。当我尝试渲染结果时，什么都没有，所以我添加了一些控制台日志来查看发生了什么。useState 钩子中的 setter 函数似乎没有做任何事情。我一直在关注这个视频以获得一些指导，我的代码并没有太大的不同。

我有以下组件：

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>
))}

现在我看到了页面上呈现的 ID。谢谢你的帮助。

4

1 回答 1

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

请尝试使用console.log(result). 一旦您通过 setter（在您身边setResult）插入值，设置状态就不会更新。因此，要做到这一点，需要延迟。

于 2019-09-26T23:11:50.060 回答