React遍历results状态时报map is not a function错误

运行代码抛出异常：results.map is not a function，控制台提示可在组件树中添加error boundary自定义错误处理行为。

对名为results的state做遍历渲染时会持续触发该报错，已知map是数组的标准内置方法，但现有逻辑始终无法正常运行。

App.js #

import "./App.css";
import React, { useEffect, useState } from "react";
import ContactCard from "./ContactCard";

const App = () => {
  const [results, setResults] = useState([]);

  useEffect(() => {
    fetch("https://randomuser.me/api/?results=5")
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setResults(data);
      });
  }, []);

  return (
    <div>
      {results.map((result, i) => {
        return (
          <ContactCard
            key={i}
            avatarUrl={result.picture.large}
            name={result.name}
            email={result.email}
            age={result.dob.age}
          />
        );
      })}
    </div>
  );
};
export default App;

ContactCard.js #

import React, { useState } from "react";

const ContactCard = (props) => {
  const [showAge, setShowAge] = useState(false);
  const showAgefn=()=>{
    setShowAge(!showAge)
  }

  return (
    <div className="contact-card">
      <img src={props.avatarUrl} alt="profile" />
      <div className="user-details">
        <p>Name: {props.name}</p>
        <p>Email: {props.email}</p>
        <button onClick={showAgefn}>Show age</button>
        {showAge && <p>Age: {props.age}</p>} 
      </div>
    </div>
  );
};

export default ContactCard;

randomuser接口返回的data是完整响应对象，真正的用户列表存在data.results数组字段下，当前代码直接把整个响应对象赋值给了results状态。results初始值是数组，但被赋值成对象后，对象本身没有map方法，调用自然报错。
另外代码还有个隐藏问题：接口返回的name字段是包含头衔、名、姓的对象，直接传进组件渲染会显示[object Object]，无法展示正常人名。

• 修改fetch回调中的状态赋值逻辑，取响应中真正的用户数组赋值：将setResults(data)改为setResults(data.results)
• 增加防御性判断，渲染前先校验results是否为数组，避免接口返回异常时触发同类报错，同时修正姓名字段的拼接逻辑，核心修改后的渲染代码如下：

return (
  <div>
    {Array.isArray(results) && results.map((result, i) => {
      const fullName = `${result.name.title} ${result.name.first} ${result.name.last}`
      return (
        <ContactCard
          key={i}
          avatarUrl={result.picture.large}
          name={fullName}
          email={result.email}
          age={result.dob.age}
        />
      );
    })}
  </div>
)

• 长期优化建议：在应用外层添加Error Boundary错误边界组件，捕获子组件渲染、运行阶段的异常，配置降级展示逻辑，避免单个组件报错导致整个页面白屏。

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