React Native双标签页场景下FlatList完全无法渲染问题求助

以下是你代码中存在的问题及对应修复方案：

• 错误1：FlatList要求data属性传入数组类型，你当前的apidata是键为数字的对象结构，需要先转换为数组才能被FlatList识别渲染
• 错误2：组件参数接收错误，函数组件的第一个入参是整体props对象，你直接写(apidata)拿到的不是接口返回的数据，而是props对象本身，需要解构取出apidata字段
• 错误3：keyExtractor属性要求传入函数，用于返回每一项的唯一标识，你直接写入固定值不符合参数要求
• 错误4：renderItem回调的入参是包含item字段的对象，你直接访问外层apidata的属性，无法拿到单条列表项的对应字段
• 额外建议：用flex:1代替外层View的height:100%更适配滚动场景，同时可以给apidata加兜底空数组，避免接口请求完成前的空值报错

修正后代码示例 #

// 存状态时先把接口返回的对象转成数组，比如：setApidata(Object.values(接口返回的结果))

const Crypto = ({apidata}) => { // 解构props拿到apidata字段
  console.log(apidata, "log e crypto");
  return (
    <View
      style={{
        backgroundColor: "red",
        justifyContent: "center",
        width: "100%",
        flex: 1, 
      }}
    >
      <Text style={{ color: "white" }}>Hi</Text>

      <FlatList
        data={apidata ?? []} // 加空数组兜底
        scrollEnabled
        keyExtractor={(item, index) => `${item.risk_level}_${index}`} // 传入函数返回唯一键
        renderItem={({item}) => { // 解构拿到当前列表项数据
          return <Text style={{ color: "white" }}>{item.stop_loss}</Text>;
        }}
      />
  )
}

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