时间戳

首页 > 解决方案 > FLatlist 完全不渲染

react-native - FLatlist 完全不渲染

问题描述

我正在尝试制作 2 个选项卡，其中每个选项卡将自己呈现不同的平面列表，但由于某种原因，在我将 API 数据传递给状态（'apidata'）后，它不会呈现平面列表，而我可以看到ApiData 对象的日志。任何人都可以观察我的渲染数据问题吗？

这是数据样本

Object {
  "0": Object {
    "comment": "",
    "end_time": "2021-09-04T11:59:03Z",
    "enter": "49000.00000000",
    "exchange": "BINANCE",
    "leverage": 120,
    "name": "Bitcoin",
    "per": "USDT",
    "position": "LONG",
    "risk_level": "Crazy",
    "stop_loss": "48700.00000000",
    "symbol": "BTC",
    "target_1": "52700.00000000",
    "target_2": "68000.00000000",
    "target_3": "0.00000000",
  },
  "1": Object {
    "comment": "",
    "end_time": "2021-09-14T06:00:00Z",
    "enter": "495000.00000000",
    "exchange": "binanace",
    "leverage": 15,
    "name": "Bitcoin",
    "per": "btc/usdt",
    "position": "LONG",
    "risk_level": "High",
    "stop_loss": "48000.00000000",
    "symbol": "btc",
    "target_1": "52000.00000000",
    "target_2": "5300.00000000",
    "target_3": "0.00000000",
  },

这是我的代码，我在点击它的选项卡后尝试查看我的 const 是否有效。

const Crypto = (apidata) => {
  console.log(apidata, "log e crypto");
  return (
    <View
      style={{
        backgroundColor: "red",
        justifyContent: "center",
        width: "100%",
        height: "100%",
      }}
    >
      <Text style={{ color: "white" }}>Hi</Text>

      <FlatList
        data={apidata}
        scrollEnabled
        keyExtractor={apidata?.risk_level}
        renderItem={(item) => {
          return <Text style={{ color: "white" }}>{apidata?.stop_loss}</Text>;
        }}
      />

标签： react-nativereact-native-flatlist

解决方案

FlatList 接收一个数据数组而不是对象的对象。考虑将从 api 接收到的数据转换为对象数组。

推荐阅读