从 API 中获取对象列表后，如何使用反应钩子将列表设置到组件的状态中？

Question

从 API 获取学生列表后，我想使用 React Hooks 将列表设置为状态，但我失败了。这是我的代码：

const Book = ({ book }) => {
const [students, setStudents] = React.useState([])
const [form, setForm] = React.useState(false)
const closeForm = () => setForm(false)

function loadStudentList(){
    fetch('http://127.0.0.1:8000/api/students/')
    .then((response) => response.json())
    .then(studentsList => {
        studentsList.map((student) => {
            setStudents(students => [...students, student])
        })
        setForm(true)
        console.log(students)
    })
}

console.log(学生)returns一个空数组仍然..

Answer 1

学生状态需要一些时间来填充，因此您的每个 setStudents(...) 调用都将排队，并且运行以 non-code-blocking 的方式。这意味着您的 console.log 将在设置发生之前执行。您可以通过创建一个 useEffect 挂钩来监视学生状态，然后在它填充时将其调出来解决这个问题。尝试添加以下内容，看看是否有效！

useEffect(() => {
   if (students) console.log(students)
}, [students])

此外，您应该同时将所有学生设置为 setStudents(studentsList)

Answer 2

const Book = ({ book }) => {
const [students, setStudents] = React.useState([])
const [form, setForm] = React.useState(false)
const closeForm = () => setForm(false)

function loadStudentList(){
    fetch('http://127.0.0.1:8000/api/students/')
    .then((response) => response.json())
    .then(studentsList => {
        setStudents(studentList)
        setForm(true)
    })
}

console.log(students)

从那里，根据需要在您的 React 应用中访问 students。

从 API 中获取对象列表后，如何使用反应钩子将列表设置到组件的状态中？

After fetching a list of objects from an API, how do I set the list into the Component's State using react hooks?

reactjs

use-state