React函数组件访问JSON嵌套对象时触发TypeError错误的技术求助

我来帮你分析问题根源，以及对应的修复方案：

核心问题拆解 #

你的代码存在两个关键错误，直接导致了TypeError：

1. 初始状态类型不匹配：你把randomDataJSON的初始值设为空字符串''，组件首次渲染时randomDataJSON[0]是undefined，此时尝试访问.name必然触发报错。
2. 错误转换数据存储格式：你用JSON.stringify(userData, null, 2)把API返回的对象数组转成了字符串，但字符串无法通过点语法（.name.first）访问嵌套属性——这是最核心的错误！

修复后完整代码示例 #

我们调整状态存储逻辑，同时处理初始渲染和数据未加载的边界情况：

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

function GetData() {
  // 初始状态设为空数组，和API返回的数据类型匹配
  const [randomData, setRandomData] = useState([]);
  const url = 'https://randomuser.me/api/';

  const getData = () => {
    axios
      .get(url)
      .then((results) => {
        // 直接存储API返回的原始对象数组，不转字符串
        setRandomData(results.data.results);
      })
      .catch((err) => console.error(err));
  };

  return (
    <div>
      <h3>GetData Component</h3>
      {/* 用可选链操作符?. 处理数据未加载的情况，避免报错 */}
      <pre>{randomData[0]?.name?.first || '点击按钮获取用户数据'}</pre>
      {/* 可选：如果需要展示完整格式化的JSON，单独用一个pre标签 */}
      {randomData.length > 0 && (
        <pre>{JSON.stringify(randomData, null, 2)}</pre>
      )}
      <button onClick={getData}>Get Data</button>
    </div>
  );
}
export default GetData;

关键修改说明 #

• 状态初始化优化：将useState('')改为useState([])，让初始状态的类型和API返回的数组类型保持一致，避免首次渲染时的类型冲突。
• 存储原始对象：setRandomData(results.data.results)直接保存API返回的用户对象数组，这样就能正常通过点语法访问嵌套属性。
• 边界错误防护：使用?.可选链操作符，当randomData[0]不存在时（比如初始渲染或请求未完成），不会触发错误；同时用||设置友好的默认提示文本。
• 可选JSON展示：如果需要展示完整的格式化JSON，可以在数据加载完成后，用JSON.stringify把对象转成字符串再单独渲染。

这样修改后，点击按钮就能正常展示用户名字，再也不会出现TypeError啦！

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