React Native中如何在render方法访问嵌套JSON的team子项

看起来你已经成功获取到了顶层的name_last，接下来要处理的team是一个数组类型，所以不能直接像访问普通对象属性那样调用team.name_first，得先遍历数组或者指定索引来访问里面的子对象。下面给你两种常用的实现方式：

1. 遍历整个team数组，渲染所有成员信息 #

如果需要把team里的所有成员都展示出来，用数组的map方法遍历是最方便的：

render() { 
  const { params } = this.props.navigation.state;

  return (
    <View>
      {/* 原有的顶层姓氏展示 */}
      <Text>{params.name_last}</Text>
      {/* 遍历team数组，逐个渲染成员信息 */}
      {params.team.map((teamMember, idx) => (
        <Text key={teamMember.id}>
          成员: {teamMember.name_first} {teamMember.name_last}
        </Text>
      ))}
    </View>
  );
}

这里需要注意两个点：

• 每个通过map渲染的元素都需要一个唯一的key属性，用teamMember.id比用索引idx更可靠，因为索引会随着数组变化而改变，可能导致渲染异常。
• 如果不确定params.team是否存在或者是否为数组，可以加个前置判断避免报错，比如：params.team?.map(...)（需要React Native支持可选链语法），或者用条件渲染：params.team && params.team.map(...)

2. 访问team数组中的特定项 #

如果只需要展示数组里某一个特定位置的成员（比如第一个），直接通过数组索引访问即可，记得加空值保护防止数组为空时报错：

render() { 
  const { params } = this.props.navigation.state;

  return (
    <View>
      <Text>{params.name_last}</Text>
      {/* 访问第一个成员，先判断数组是否有内容 */}
      {params.team.length > 0 && (
        <Text>团队第一个成员: {params.team[0].name_first}</Text>
      )}
    </View>
  );
}

这样就能顺利获取到team数组里的子项属性啦～

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