React调用API获取数据渲染列表偶发失效、列表无法渲染问题

实现目标
渲染从dummy API（虚拟测试接口）获取的列表数据。

相关代码
App.js

import logo from './logo.svg';
import Header from './components/Header';
import MapArea from './components/MapArea';
import Card from './components/Card';
import './App.css';
import React from "react";
class App extends React.Component {
  constructor(e){
    super();
    this.state = {
      menu:false,
      userData:[]
    }
  }

  componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
    .then((a)=>{return a.json()})
    .then((b)=>{
      this.setState({
        userData:b
      })
    })
  }

Card.js

function Card(props){
let userData = props.data.userData.data;
    console.log(userData) //偶发正常打印
    return(<div>{userData.map((item)=>{<h1 key={item.id}>item.id</h1>})}</div>)
}
export default Card;

遇到的问题
当前代码运行存在异常：Card组件内的console.log(userData)语句偶发可正常打印数据，偶发无输出；出现异常时，需要删除Card.js渲染方法中的JavaScript大括号{}保存后，再粘贴回大括号重新保存才可临时恢复，同时列表始终无法正常渲染，附上异常时的控制台截图如上。

问题原因 #

一共4处代码错误直接导致异常：

1. 初始状态类型错误：App组件中userData初始值设为数组[]，但接口返回的是对象，首次渲染时Card组件读取props.data.userData.data会直接触发「读取undefined的data属性」报错，组件渲染中断，这就是console偶发不打印的核心原因——代码根本没走到console那行就抛错了，热更新时偶尔绕过了初始渲染检查才会临时恢复。
2. 构造函数super未传参：constructor(e){ super() }没有把参数传入父类构造函数，会导致组件实例的props指向异常。
3. map回调无返回值：Card组件中map((item)=>{<h1>...</h1>})用大括号包裹箭头函数逻辑，但没有写return，遍历后得到的全是undefined，没有可渲染的内容。
4. JSX变量未插值：<h1>item.id</h1>直接写了静态字符串，不会读取item对象的id值，需要用{}包裹变量才能输出动态内容。
   另外贴出的App.js代码不完整，缺少render方法和默认导出，本身就会导致编译失败。

修复方案 #

修正后的App.js

补全render方法和导出，调整初始状态、增加加载态避免初始渲染报错，修正props传值：

import logo from './logo.svg';
import Header from './components/Header';
import MapArea from './components/MapArea';
import Card from './components/Card';
import './App.css';
import React from "react";
class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      menu:false,
      userData: null,
      loading: true
    }
  }

  componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
    .then(res => res.json())
    .then(res => {
      this.setState({
        userData: res,
        loading: false
      })
    })
    .catch(err => {
      console.error('请求失败', err)
      this.setState({loading: false})
    })
  }

  render() {
    if (this.state.loading) return <div>数据加载中...</div>
    return (
      <div className="App">
        <Header />
        <MapArea />
        <Card userData={this.state.userData} />
      </div>
    )
  }
}

export default App;

修正后的Card.js

增加空值安全判断，修正map返回值和变量插值：

function Card(props){
  // 可选链做安全判断，无数据时默认空数组，避免报错
  const userList = props.userData?.data || [];
  console.log(userList)
  return(
    <div>
      {/* 箭头函数省略大括号会自动返回后续JSX，不用手动写return */}
      {userList.map(item => <h1 key={item.id}>{item.id}</h1>)}
    </div>
  )
}
export default Card;

修改后无需反复触发热更新，数据可以稳定正常渲染，不会再出现偶发的console无输出问题。

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