Question

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

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

反应挂钩是异步的，因此在运行console.log(students)之后立即运行setStudents(data)时，它仍未填充，但是第二次单击按钮时，第一次单击时它已被填充

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

Answer 2

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的值

Answer 3

问题是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>
);

}

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

3 个答案: