javascript - 为什么state在foreach中更新时不将Array state中的所有数据保留在hook中？

Question

我想通过 foreach 更新钩子(Hook)中的数组状态，但它只保留最后一个。我还使用 useEffect 的空数组来通过更新状态来停止每次重新渲染。

import './App.css';
import Card from "./Card"
import Books from "./Books"
import { useEffect, useState } from 'react';
import axios from "axios"
import BooksInfo from './Books';
function App() {
  const [bookInfo,setBookInfo] = useState([])
  useEffect( ()=>{
    let bname = ""
    let bauthor = ""
    let bcover = 0
    async function getInfo(){
        let results = Promise.all(BooksInfo.map(book=>{
          let result = axios.get(`https://openlibrary.org/search.json?q=${book}`)
          return result
        }))
        ;(await results).forEach(result=>{
          console.log(result)
            bname= result.data.docs[0].title_suggest
            bauthor= result.data.docs[0].author_name[0]
            bcover= result.data.docs[0].cover_i
            setBookInfo([...bookInfo , { name:bname , author:bauthor  , cover:bcover }]);
            console.log(bookInfo)
        })
    }

    getInfo()
  },[])  

以下是其中一条注释的附加代码:此代码帮助我了解 state 和 useEffect 的工作原理。

function App(){
  console.log("App Rendered!");

  const [counter, setCounter] = useState(0);
  const [test, setTest] = useState(0)
  const [run,setRun] = useState(0)
  useEffect(()=>{
    console.log("inside useEffect")
    setCounter(counter => counter + 1);
    setTest(test => test +counter)

  },[run])
  const count= ()=>{
    console.log("test")
    setRun(run => run + 2)
  }
  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button
        onClick={count}
      >
        Increment
      </button>
    </div>
  );
}
export default App;

Answer 1

setBookInfo 函数是异步的，因此无法保证每次迭代后，bookInfo 的数据都会更新为新插入的数据。 map功能更适合您的情况

const newBookInfor = (await results).map((result) => {
    let bname = "";
    let bauthor = "";
    let bcover = 0;
    bname = result.data.docs[0].title_suggest;
    bauthor = result.data.docs[0].author_name[0];
    bcover = result.data.docs[0].cover_i;
    return { name: bname, author: bauthor, cover: bcover };
});
setBookInfo(newBookInfor);