如何在React.js中使用axios获取API数据并将控制台响应展示到网页

你只需要按以下三步调整现有代码即可实现数组渲染： #

1. 初始化state新增存储字段 #

在组件的state中新增videoList字段，用来存储接口返回的视频路径数组，修改后的constructor代码如下：

constructor(props) {
    super(props)
    this.state = {
        key: '',
        videoList: [] // 新增字段，存储返回的视频路径数组
    }
    console.log(this.state)
}

2. 请求成功后将数据存入state #

在axios的成功回调中，把接口返回的数组存入state，修改后的submitHandler代码如下：

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({ videoList: response.data })
    })
    .catch(error => {
        console.log(error)
    })
}

3. render函数中遍历数组渲染内容 #

在返回的JSX中表单下方添加数组遍历逻辑，你可以选择直接展示路径，也可以直接渲染可播放的视频元素，修改后的render代码如下：

render() {
    const { key, videoList } = this.state // 新增解构videoList
    
    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>
            {/* 新增：渲染返回的数组内容 */}
            <div style={{marginTop: '30px', textAlign: 'left'}}>
                <h3>查询到的视频列表：</h3>
                {videoList.length > 0 ? (
                    <ul>
                        {videoList.map((item, index) => (
                            <li key={index}>
                                {/* 仅展示路径的写法 */}
                                <p>{item}</p>
                                {/* 如果需要渲染可播放的视频，用下面这段代码替换上面的p标签 */}
                                {/* <video controls width="400" src={item}></video> */}
                            </li>
                        ))}
                    </ul>
                ) : (
                    <p>暂无查询结果</p>
                )}
            </div>
        </div></center>
    )
}

import React, { Component } from 'react'
import axios from 'axios'
class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '',
            videoList: []
        }
        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)
            this.setState({ videoList: response.data })
        })
        .catch(error => {
            console.log(error)
        })
    }

    render() {
        const { key, videoList } = 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>
                <div style={{marginTop: '30px', textAlign: 'left', maxWidth: '800px'}}>
                    <h3>查询到的视频列表：</h3>
                    {videoList.length > 0 ? (
                        <ul>
                            {videoList.map((item, index) => (
                                <li key={index} style={{marginBottom: '15px'}}>
                                    <p>路径：{item}</p>
                                    <video controls width="400" src={item}></video>
                                </li>
                            ))}
                        </ul>
                    ) : (
                        <p>暂无查询结果</p>
                    )}
                </div>
            </div></center>
        )
    }
}

export default PostForm

注：如果视频路径是本地文件路径，浏览器会出于安全限制禁止直接加载，你可以将路径改为服务器对外提供的静态资源访问地址即可正常播放

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