React JS中API数据无法显示问题求助（附代码）

先梳理代码里的核心问题，这些是导致数据无法展示的直接原因：

• 字段大小写不匹配：API返回的站点数组是Site（首字母大写），但代码里多处用了小写的site（比如data.site[0].SiteName），导致无法读取到数据。
• 错误的渲染判断条件：底部区域的显示判断用了data.name !== undefined，但返回的LocalAuthority对象里没有name属性，这个条件永远不成立，底部区域不会渲染。
• 缺少请求错误处理：axios请求没有捕获异常，就算请求失败（比如输入无效ID、网络问题），也看不到错误信息，无法排查问题。
• URL构建的闭包隐患：把URL定义在组件顶层，可能因为React闭包特性拿到旧的LocalAuthorityId值，最好在请求函数内部动态构建。
• 输入无验证：没有校验输入是否是1-20的数字，用户输入非法内容时请求会失败，没有任何反馈。

修复后的代码 #

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

function App() {
  const [data, setData] = useState({})
  const [localAuthorityId, setLocalAuthorityId] = useState('')
  const [error, setError] = useState('')

  const searchLocation = (event) => {
    if (event.key !== 'Enter') return;
    
    // 输入验证：检查是否是1-20之间的数字
    const id = parseInt(localAuthorityId, 10);
    if (isNaN(id) || id < 1 || id > 20) {
      setError('请输入1-20之间的数字');
      return;
    }
    setError('');

    // 函数内部构建URL，避免闭包问题
    const url = `http://api.erg.ic.ac.uk/AirQuality/Daily/MonitoringIndex/Latest/LocalAuthorityId=${id}/Json`;

    axios.get(url)
      .then((response) => {
        const result = response.data.DailyAirQualityIndex.LocalAuthority;
        setData(result);
        console.log(result);
      })
      .catch((err) => {
        setError('请求失败，请检查输入或网络');
        console.error('API请求错误:', err);
      })
      .finally(() => {
        setLocalAuthorityId('');
      });
  }

  return (
    <div className="app">
      <div className="search">
        <input
          value={localAuthorityId}
          onChange={event => setLocalAuthorityId(event.target.value)}
          onKeyPress={searchLocation}
          placeholder='输入1-20之间的数字'
          type="number" // 限制输入数字类型
        />
        {error && <p style={{color: 'red'}}>{error}</p>}
      </div>
      <div className="container">
        <div className="top">
          <div className="location">
            <p>{data.LocalAuthorityName || '未获取到数据'}</p>
          </div>
          <div className="temp">
            {data.Site?.[0]?.SiteName || '---'}
          </div>
          <div className="description">
            {data.Site?.[1]?.SiteName || '---'}
          </div>
        </div>

        {/* 用Site数组是否存在判断是否渲染底部 */}
        {data.Site && data.Site.length > 0 && (
          <div className="bottom">
            <div className="feels">
              <p className='bold'>{data.Site[0]?.Species?.[0]?.AirQualityBand || '---'}</p>
              <p>站点1空气质量等级</p>
            </div>
            <div className="humidity">
              <p className='bold'>{data.Site[1]?.Species?.[1]?.AirQualityBand || '---'}</p>
              <p>站点2空气质量等级</p>
            </div>
            <div className="wind">
              <p className='bold'>{data.Site[1]?.Species?.[2]?.AirQualityBand || '---'}</p>
              <p>站点3空气质量等级</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

关键修复说明 #

1. 统一字段大小写：把所有data.site改成data.Site，匹配API返回的字段结构。
2. 修复渲染条件：底部区域用data.Site && data.Site.length > 0判断，确保有数据时才渲染。
3. 添加错误处理：用catch捕获请求异常，新增error状态展示错误提示，方便排查问题。
4. 输入优化：
   • 输入框改成number类型，限制只能输入数字
   • 增加1-20的范围校验，不符合时给出明确提示
5. 可选链操作符：用?.避免访问不存在的属性导致报错，比如data.Site?.[0]?.SiteName，就算数据未加载完成也不会抛出错误。
6. URL构建优化：在请求函数内部动态拼接URL，避免闭包带来的旧值问题。

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