React中从嵌套对象取数据报错：TypeError: map不是函数

嘿，我一眼就揪出问题所在啦！咱们一步步拆解来看：

问题核心原因 #

你在Modal组件里踩的坑，本质是API返回的数据类型和你预期的不匹配：

• 当你调用users/${id}接口时，后端返回的是单个用户对象（就像你给出的示例里那一条用户数据），而不是数组；
• 但你初始化this.state.user = []（数组），之后用setState把它改成了单个对象——对象根本没有map方法，这就是报错的直接原因！
• 另外你尝试的usr.address.map也不对，因为address本身是嵌套对象，不是数组，同样没法用map遍历。

而Table组件能正常工作，是因为你调用的是users接口，返回的是用户数组，所以this.state.usuarios.map完全没问题。

解决方案：适配单个用户对象的场景 #

我们只需要调整Modal组件的状态管理和渲染逻辑就行：

步骤1：修正state初始化 #

把user的初始值从数组改成null或者空对象，更贴合单个用户的场景：

constructor(props) {
  super(props)
  this.state = {
    user: null // 用null更方便判断数据是否加载完成
  }
}

步骤2：修改渲染逻辑 #

现在user是单个对象，不需要用map，直接访问属性就行。同时加个判断，避免组件初始渲染时user为null导致的报错：

render() {
  const { user } = this.state;
  return (
    <div>
      {/* 先判断用户数据是否加载完成 */}
      {user ? (
        <ul>
          <li>{user.address.street}</li>
          <li>{user.address.city}</li>
          <li>{user.company.name}</li>
          {/* 其他你想展示的嵌套属性都可以这么写 */}
        </ul>
      ) : (
        <p>正在加载用户信息...</p>
      )}
      <Table userInfo={this.userId} />
    </div>
  )
}

额外小技巧：安全访问嵌套属性 #

如果担心后端返回的某些嵌套字段可能不存在（比如某个用户没有address），可以用可选链操作符?.避免报错：

<li>{user.address?.street}</li>

这样即使address是undefined，也只会返回undefined，不会抛出错误。

完整修正后的Modal组件代码 #

export default class Modal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      user: null
    }
  }
  userId = id => {
    axios.get(configs.BASE_URL + `users/${id}`)
      .then(response => {
        this.setState({ user: response.data })
      })
  }
  render() {
    const { user } = this.state;
    return (
      <div>
        {user ? (
          <ul>
            <li>{user.address.street}</li>
            <li>{user.address.city}</li>
            <li>{user.company.name}</li>
          </ul>
        ) : (
          <p>正在获取用户信息...</p>
        )}
        <Table userInfo={this.userId} />
      </div>
    )
  }
}

这样就能完美解决你的问题啦！

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