React函数组件调用API存数据到数组后前端无法展示问题求助

问题根因 #

你的代码核心问题是不符合React的响应式更新规则，存在两处关键错误：

• 你将measurements、parameter这类需要在页面更新展示的变量定义为普通JS变量，还尝试直接修改props值。React只会监听状态（state）的变更触发组件重新渲染，修改普通变量/只读props不会让页面刷新，所以你更新了数据也看不到变化
• 渲染时没有做空值判断，接口返回前measurements是空数组，直接取measurements[0].name会抛出运行时错误，也会导致页面渲染异常

修正方案 #

1. 引入useState钩子管理响应式状态 #

删除组件外部定义的普通measurements数组，在组件内部用useState定义所有需要响应更新的变量。

2. 调整接口回调逻辑，用set方法更新状态 #

不要直接修改普通变量，调用state对应的set方法触发组件重新渲染。

3. 渲染逻辑增加空值兼容 #

避免数组为空时访问下标报错。

完整修正代码 #

import axios from 'axios';
import React, { useState } from 'react';

const CitySelection = (props) => {
    const city = props.city;
    const cityTwo = props.cityTwo;
    // 用useState定义响应式状态
    const [measurements, setMeasurements] = useState([]);
    const [parameter, setParameter] = useState(props.parameter || '');
    const [unit, setUnit] = useState(props.unit || '');
    const [lastUpdated, setLastUpdated] = useState(props.lastUpdated || '');

    const Api_call = (city, cityTwo) => {
        let api = "https://u50g7n0cbj.execute-api.us-east-1.amazonaws.com/v2/latest?limit=100&page=1&offset=0&sort=asc&radius=1000&country_id=US&country=US&city="+city.city+"&city="+cityTwo.cityTwo
        axios.get(api, { crossdomain: true })     
        .then(response => {    
            const result = response.data.results
            const tempList = []
            if (result != null){    
                for(let i = 0; i < result.length; i++){     
                    const currentItem = result[i].measurements[0];
                    // 取第一条结果的公共参数赋值，可按需调整逻辑
                    if(i === 0) {
                        setParameter(currentItem.parameter);
                        setLastUpdated(currentItem.lastUpdated);
                        setUnit(currentItem.unit);
                    }
                    tempList.push({
                        "name":result[i].city, 
                        "value":currentItem.value,
                        "unit":currentItem.unit, 
                        "parameter":currentItem.parameter,
                        "lastUpdated":currentItem.lastUpdated
                    })   
                }
                // 更新measurement数组状态
                setMeasurements(tempList);
            }
        })
    } 
    return (
        <div>
            <button onClick={() => Api_call({city},{cityTwo})} >Compare Air Quality </button>
            {/* 空值判断，避免数组为空时报错 */}
            {measurements.length > 0 && <p>{ measurements[0].name }</p>}
            <span>{unit} {parameter} {lastUpdated}</span>
            <p>{city} has metrics for {parameter}{unit} and this date was collected: {lastUpdated}</p>
        </div>
    )
}

export default CitySelection;

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