React中如何访问JSON对象的数组字段并实现遍历？

错误根源 #

你的friendJson是数组类型（外层包裹了[]），而非单个对象。直接用friendJson.friends相当于在数组上读取不存在的friends属性，自然返回undefined，调用map就会抛出类型错误。

正确访问方式 #

需要先取数组中的第一个元素（你的数据结构里只有一个对象），再访问其friends数组。同时要处理两个边界情况：

1. 异步加载时friendJson可能为空数组
2. 数组元素可能不存在（比如还没加载完成）

可以用**可选链操作符?.**来安全访问，避免报错。

代码修正 #

1. 修复useEffect的无限循环问题 #

你的useEffect没有依赖数组，会导致组件每次渲染都重复调用getFriends，需要加上空依赖数组：

useEffect (() => {
  if(localStorage.getItem('authToken')) {
    getFriends()
  }
  else navigate('/signin')
}, []) // 空数组确保只执行一次

2. 正确遍历friends数组 #

修改渲染部分的代码，先判断数组是否有内容，再安全访问friends：

return (
  <>
    <div className="container">
      <h2 className="text-center">Your Friends</h2>
      {
        // 先判断是否没有朋友数据
        (!friendJson.length || !friendJson[0]?.friends?.length) && 
        <div className="text-center">You don't have any friends</div>
      }
      {
        // 安全访问并遍历friends数组
        friendJson[0]?.friends?.map((eachFriend) => {
          return <FriendItem key={eachFriend} friend={eachFriend}/>
        }) 
      }
    </div>
  </>
)

补充说明 #

• 可选链?.的作用：如果左侧值为undefined或null，会直接返回undefined，不会继续访问后续属性，避免抛出错误。
• 如果你不确定friendJson里是否只有一个对象，可以先遍历friendJson数组，再遍历每个对象的friends：

friendJson.map((userFriendData) => {
  return userFriendData.friends?.map((eachFriend) => (
    <FriendItem key={eachFriend} friend={eachFriend}/>
  ))
})

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