React调用API获取JSON数据后无法在页面正常渲染的问题

你现在的代码有两个直接导致渲染失败的问题：

• 请求成功拿到接口返回值myJson后，没有调用setData方法把数据写入组件状态，data始终是初始定义的空数组，组件不会触发重渲染
• 列表渲染时直接写了<p>items.cost_center_code</p>，这是静态文本写法，没有通过JSX语法读取变量，就算状态有值，页面也只会显示固定字符串，不会渲染实际字段内容

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

function Home(){
  const [data, setData] = useState([]);

  const getData= ()=>{
    fetch('http://localhost:8070/foo')
    .then(function(response){
      console.log(response)
      // 补充请求状态校验，避免4xx/5xx场景下json解析报错
      if (!response.ok) {
        throw new Error(`请求出错，状态码：${response.status}`)
      }
      return response.json();
    })
    .then(function(myJson){
      console.log(myJson);
      // 把接口返回数据写入状态，触发组件重渲染
      // 注意：如果接口返回结构是{code:200, data: [....]}这类格式，要取对应数组字段传入，比如setData(myJson.data)
      setData(myJson)
    })
    .catch(err => console.error('请求异常:', err))
  }

  useEffect(()=>{
    getData()
  },[])


  return (
    <div className="Home">
      {
        data?.length > 0 && data.map((item, index) => (
          // 用{}包裹JS变量读取实际值，列表项加唯一key避免React警告
          <p key={item.id || index}>{item.cost_center_code}</p>
        ))
      }
    </div>
  )
}

export default Home;

• 先确认接口返回值结构：在then里打印myJson，看返回值是不是直接的数组，如果外层包了业务状态码、消息字段，一定要取到实际的数组字段再传给setData，否则data.length判断不成立，不会走map渲染逻辑
• 检查控制台有没有CORS跨域报错：虽然能打印response对象，但跨域配置错误时可能出现响应头可读、响应体读取异常的情况，直接看Network面板对应接口的响应内容是不是预期的JSON结构
• 校验字段名拼写：确认接口返回的数组项里确实存在cost_center_code字段，有没有大小写错误、下划线/驼峰拼写偏差，字段名读错会导致渲染空白
• 加状态日志定位问题：在return语句前加console.log('渲染时的data值：', data)，每次组件渲染都会打印当前状态，能快速区分是状态没更新成功，还是渲染逻辑写的有问题

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