React项目中如何使用axios将API返回的控制台数据渲染到网页

你需要对原有代码做三处调整即可实现需求：

• 在state中新增存储接口返回数据、错误信息的字段
• 请求成功后将返回数据存入state触发组件重渲染
• 在render函数中新增数据渲染逻辑，兼容正常数据、请求异常两种场景

修改后的完整代码如下：

import React, { Component } from 'react'
import axios from 'axios'

class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '',
            apiResponse: null,
            error: null
        }
        console.log(this.state)
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        
        axios
        .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`)
        .then(response => {
            console.log(response.data)
            // 将返回数据存入state触发重渲染
            this.setState({ apiResponse: response.data, error: null })
        })
        .catch(error => {
            console.log(error)
            // 存储错误信息方便页面提示
            this.setState({ error: '请求失败，请检查参数或接口状态', apiResponse: null })
        })
    }

    render() {
        const { key, apiResponse, error } = this.state
        
        return (
            <center><div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <h2> DATE PICKER</h2><br></br>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                        
                    </div>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>
                {/* 新增数据渲染区域 */}
                <br/><br/>
                <div>
                    {error && <p style={{color: 'red'}}>{error}</p>}
                    {apiResponse && (
                        <div>
                            <h3>查询结果：</h3>
                            {/* 可根据你的实际接口返回结构调整下方渲染逻辑 */}
                            {Array.isArray(apiResponse) ? (
                                <ul>
                                    {apiResponse.map((item, index) => (
                                        <li key={index}>{JSON.stringify(item)}</li>
                                    ))}
                                </ul>
                            ) : (
                                <pre>{JSON.stringify(apiResponse, null, 2)}</pre>
                            )}
                        </div>
                    )}
                </div>
            </div></center>
        )
    }
}
export default PostForm

如果你的接口返回数据是固定结构的对象，直接替换掉上面的JSON.stringify部分，取对应字段值渲染即可，比如返回数据为{date: '2024-01-01', content: 'xxx'}，直接写{apiResponse.date}、{apiResponse.content}就能展示对应值。

内容的提问来源于stack exchange，提问作者user16278360