React Native LiveScore组件仅展示API部分赛事数据的问题求助

你的组件当前只读取了每个Stages节点下Events数组的第一个元素，要展示API返回的所有赛事，核心是遍历整个Events数组，而不是仅访问索引为0的元素。

修正思路与代码示例 #

假设你原来的渲染逻辑类似下面的错误写法（仅取第一个赛事）：

{data.Stages.map(stage => (
  <View key={stage.Sid}>
    <Text>{stage.Snm}</Text>
    {/* 仅渲染第一个赛事 */}
    <Text>{stage.Events[0].Tnm}</Text>
  </View>
))}

修改为遍历所有赛事的正确写法：

{data.Stages.map(stage => (
  <View key={stage.Sid} style={{ marginVertical: 12, paddingHorizontal: 8 }}>
    {/* 显示阶段分类名称 */}
    <Text style={{ fontSize: 18, fontWeight: '600', marginBottom: 8 }}>{stage.Snm}</Text>
    
    {/* 遍历当前阶段下的所有赛事 */}
    {stage.Events?.map(event => (
      <View 
        key={event.Eid} 
        style={{ 
          padding: 10, 
          borderWidth: 1, 
          borderColor: '#e0e0e0', 
          borderRadius: 6, 
          marginBottom: 8 
        }}
      >
        {/* 自定义赛事信息展示，可根据API字段调整 */}
        <Text style={{ fontSize: 16, fontWeight: '500' }}>{event.Tnm}</Text>
        <Text>
          {event.Tr1}: {event.R1 || 0} | {event.Tr2}: {event.R2 || 0}
        </Text>
        <Text style={{ color: '#666', fontSize: 12, marginTop: 4 }}>{event.Eps}</Text>
      </View>
    ))}
  </View>
))}

关键说明 #

1. 遍历Events数组：用stage.Events.map(...)替代Events[0]，逐个渲染数组中的每一项赛事
2. 唯一key属性：给每个赛事项添加key={event.Eid}，满足React列表渲染的唯一标识要求
3. 空值安全处理：使用stage.Events?.map(...)可选链操作符，避免Events数组为undefined时触发报错
4. 自定义展示字段：可根据API返回的字段（比如Tnm赛事名称、Tr1/Tr2队伍名、R1/R2比分、Eps赛事状态等）调整展示内容

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