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

Posted 2023-02-24

【中文标题】在按钮单击时反应获取数据

【英文标题】：react fetch data on button click

【发布时间】：2021-02-15 06:16:50

【问题描述】：

我正在尝试在反应中获取数据。问题是我必须单击按钮两次才能获取该数据。 虽然我在第一次点击时没有得到数据，但如果我将 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'));
 

【参考方案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>
);

【参考方案2】：

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

如果您想在状态设置器运行后立即控制结果，您可以在另一个问题上看到 this 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的值

【讨论】：

谢谢，但问题是当我尝试在没有 JSON.stringify 的情况下在 jsx 中渲染 students.data 时，它会返回 students.data 未定义的错误。我需要使用 UseEffect 挂钩吗？