在按钮单击时反应获取数据

Question

我正在尝试在反应中获取数据。问题是我必须单击按钮两次才能获取该数据。 虽然我在第一次点击时没有得到数据，但如果我将 JSON.stringify 添加到它，它会以某种方式呈现。如果我不添加 JSON.stringify 它返回未定义。如果有人知道这是什么请帮助我

without clicking
on first click
on second click

import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios'

function Example() {

const [students,setStudents] = useState('')
const [name,setName] = useState('')

const handleClick = async() => {
    const data = await axios.get('api/foo')
    setStudents(data)
    console.log(students)
}

return (
    <div className="container">
        <h2>Example component</h2>
        <button onClick = {handleClick}>Get students</button>
        <div>
            {JSON.stringify(students.data)}
        </div>
    </div>
);
 }

export default Example;

if (document.getElementById('root')) {
     ReactDOM.render(<Example />, document.getElementById('root'));
 }

Answer 1

问题是 setStudents 是一个异步函数，所以我只是创建了学生对象并添加到它的加载属性

const [students,setStudents] = useState({
    data: '',
    loading: true
})
const [name,setName] = useState('')

const handleClick = async() => {
    const data = await axios.get('api/foo')
    setStudents({
        data: data,
        loading: false
    })
}

return (
    <div className="container">
        <h2>Example component</h2>
        <button onClick = {handleClick}>Get students</button>
        <div>
            {students.loading?'':
            students.data.data[0].name}
        </div>
    </div>
);

}

Answer 2

React 钩子是异步的，所以当你在运行 setStudents(data) 之后立即运行 console.log(students) 时，它仍然没有被填充，但是当你第二次点击按钮时，它已经从你第一次点击它时被填充了。

如果您想在状态设置器运行后立即控制结果，您可以在另一个问题上看到 this answer。

Answer 3

setStudent 是一个异步函数。这意味着students 的值不会在您调用setStudents 后立即更改。

尝试将 console.log 移到 handleClick 函数之外。像这样-

import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios'

function Example() {

const [students,setStudents] = useState('')
const [name,setName] = useState('')

const handleClick = async() => {
    const data = await axios.get('api/foo')
    setStudents(data)
}

console.log(students)

return (
    <div className="container">
        <h2>Example component</h2>
        <button onClick = {handleClick}>Get students</button>
        <div>
            {JSON.stringify(students.data)}
        </div>
    </div>
);
 }

export default Example;

if (document.getElementById('root')) {
     ReactDOM.render(<Example />, document.getElementById('root'));
 }

最初，该值为空字符串，然后将更改为api/foo的值