Reactjs 使用setState获取数据数组的react正在工作，但不使用挂钩

我试图用钩子获取数据数组，但它抛出了一个错误。但是，当使用setState时，它将起作用

我从googleapis获得的图书数据如下：

const [books, setBooks] = useState([])

  const searchBook = (event) => {
    event.preventDefault()
    request
      .get('https://www.googleapis.com/books/v1/volumes')
      .query({q:searchField})
      .then((data)=> {
        console.log(data.body.items)

        //with setState it works
        this.setState({books: [...data.body.items]})

        //with hooks it is not working
        setBooks([...data.body.items])
        console.log(books)

      })
  }

使用钩子将抛出错误对象作为子对象无效

你知道怎么用钩子吗

编辑

我添加了一个链接

---

例如，如果我在输入中键入dog并单击搜索，我会看到我的console.logdata.body.items，但console.logbooks，books是一个空数组。

您在console.logbooks，books中得到的结果是空的，因为setBooks是一个异步函数

试试这个

const searchBook = (event) => {
        event.preventDefault()
        request
          .get('https://www.googleapis.com/books/v1/volumes')
          .query({q:searchField})
          .then((data)=> {
            setBooks([...data.body.items])
          })
      }

实例：

---

我想知道你为什么这么做

setBooks[…数据.正文.项目]； 而不是这个

setBooksdata.body.items；

---

因为不需要从已经是数组的现有data.body.items创建新数组。因此，我在您提供的codesandbox中尝试了它，这似乎解决了问题。

嘿，kirimi，我认为您正在渲染一个对象。如果您使用Codesandbox或Codepen添加响应或链接，这将非常好。您得到的错误是在呈现期间抛出的，而不是在设置值期间抛出的。请添加您的呈现代码，即您向我们显示其内容的函数返回的内容。@YashJoshi将添加一个链接，感谢您的回答。我添加了一个链接，它成功了！但是我注意到我必须点击两次来更新钩子。你知道为什么会发生这种情况吗？检查这个问题我已经添加了一个实例，请你试试。很抱歉，我的回复太晚了。你的答案有效！但我想知道发生了什么。你能解释一下吗？