反应使用setState来获取数据数组，但不能使用钩子

Question

我正在尝试使用hooks获取数据数组，但是会引发错误。但是，使用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)

      })
  }

使用挂钩会引发错误Objects are not valid as a React child

是否知道如何使其与hooks一起使用？

已编辑

我添加了一个链接 codesandbox

例如，如果我在输入中键入dog并单击“搜索”，则会看到console.log(data.body.items)，但console.log(books, "books")是一个空数组。

Answer 1

由于console.log(books, "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])
          })
      }

实时示例：

Answer 2

我想知道你为什么要这么做

setBooks([...data.body.items]);

代替此

setBooks(data.body.items);

因为您不需要从现有的data.body.items创建一个新数组，而该数组已经是一个数组。因此，我在您提供的codeandbox中进行了尝试，似乎可以解决问题。