如何在React页面中仅展示数组第0索引的数据？

问题背景 #

我在React项目中通过axios从http://localhost:8080/AirData接口获取空气质量数据，原本代码用map遍历airData数组渲染多个组件。但当我尝试用setAirData(result.data[0])只展示数组第0索引的数据时出现了错误。

错误原因 #

核心问题是状态类型不匹配：

• 初始时airData是数组类型（useState([])），所以可以正常使用map方法遍历
• 赋值result.data[0]后，airData变成了单个对象，而对象没有map方法，调用airData.map()会直接抛出错误

两种解决方案 #

方案一：保持airData为数组类型（无需修改渲染逻辑） #

把单个数据对象包装成数组再赋值，这样后续的map遍历逻辑可以完全保留：
修改loadAirData函数中的赋值语句：

setAirData([result.data[0]]); // 将单个对象放入数组中

方案二：将airData改为单个对象类型（更简洁高效） #

如果确定只需要展示单条数据，直接把状态类型改为对象，渲染时无需遍历，直接访问属性即可：

1. 初始化状态为null（避免数据加载前访问属性报错）：

const [airData, setAirData] = useState(null);

2. 直接赋值单个对象：

setAirData(result.data[0]);

3. 渲染时先判断数据是否存在，再直接使用对象属性：

以下是修改后的完整代码：

import React, { useEffect, useState } from "react";
import axios from "axios"
import '../App.css';
import ProgressBarForCO from "../progress bar/ProgressBarForCO"
import ProgressBarForNO from "../progress bar/ProgressBarForNO";
import ProgressBarForNO2 from "../progress bar/ProgressBarForNO2";
import ProgressBarForSO2 from "../progress bar/ProgressBarForSO2";

export default function Home() {
    // 初始化为null，确保数据加载前不会触发属性访问错误
    const [airData, setAirData] = useState(null);

    useEffect(() => {
        loadAirData();
    }, []);

    const loadAirData = async () => {
        const result = await axios.get("http://localhost:8080/AirData");
        // 直接赋值数组第0项的单个对象
        setAirData(result.data[0]);
    }

    return (
        <div >
            <div className='container'>
                <div className='py-4'>
                    {/* 先判断数据是否存在，再渲染 */}
                    {airData && (
                        <h1 style={{
                            color: 'white',
                            fontSize: '30px'
                        }}>
                            Data Received Time : {airData.timeStamp}
                        </h1>
                    )}
                </div>
                <div className="containerBox" style={{ marginTop: '25px' }}>
                    {airData && (
                        <>
                            <div className="card">
                                <div className="container">
                                    <p style={{ color: 'black' }}>Carbon Monoxide </p>
                                    <div style={{
                                        width: '100px',
                                        display: 'block',
                                        marginLeft: 'auto',
                                        marginRight: 'auto'
                                    }}>
                                        <ProgressBarForCO score={airData.co} /></div>
                                </div>
                            </div>

                            <div className="card">
                                <div className="container">
                                    <p style={{ color: 'black' }}>Nitric oxide </p>
                                    <div style={{
                                        width: '100px',
                                        display: 'block',
                                        marginLeft: 'auto',
                                        marginRight: 'auto'
                                    }}>
                                        <ProgressBarForNO score={airData.no} /></div>
                                </div>
                            </div>
                        </>
                    )}
                </div>
                <br />
                <br />
                <div className="containerBox">
                    {airData && (
                        <>
                            <div className="card">
                                <div className="container">
                                    <p style={{ color: 'black' }}>Nitrogen dioxide</p>
                                    <div style={{
                                        width: '100px',
                                        display: 'block',
                                        marginLeft: 'auto',
                                        marginRight: 'auto'
                                    }}>
                                        <ProgressBarForNO2 score={airData.no2} /></div>
                                </div>
                            </div>

                            <div className="card">
                                <div className="container">
                                    <p style={{ color: 'black' }}>Sulphur dioxide </p>
                                    <div style={{
                                        width: '100px',
                                        display: 'block',
                                        marginLeft: 'auto',
                                        marginRight: 'auto'
                                    }}>
                                        <ProgressBarForSO2 score={airData.so2} /></div>
                                </div>
                            </div>
                        </>
                    )}
                </div>
                <ul className="final">
                    <li style={{ color: '#66FF00' }}>Excellent</li>
                    <li style={{ color: '#90EE90' }}>Good</li>
                    <li style={{ color: 'yellow' }}>Lightly polluted</li>
                    <li style={{ color: '#FFBF00' }}>Heavily polluted</li>
                    <li style={{ color: 'red' }}>Severely polluted</li>
                </ul>
            </div>
        </div>
    )}

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