Question

我有 React Native 平面列表组件。我的输出数据是带有键和对象的对象。而且我需要从对象渲染键和值。你能告诉我，女巫将是实施它的最好方法吗？

输出对象数据：

{"BTC_BCN":{"id":7,"last":"0.00000006",
"highestBid":"0.00000005","percentChange":"0.20000000"},
"BTC_BTS":{"id":14,"last":"0.00000374",
"highestBid":"0.00000376","percentChange":"-0.02857142"},
"BTC_CLAM":{"id":20,"last":"0.00029000",
"highestBid":"0.00028119","percentChange":"-0.01854609"}}

希望的结果：

      <FlatList
        data={}
        keyExtractor={}
        renderItem={() => (
          <CryptoItem
            name={key}
            highBid={data.id}
            lastBid={data.last}
            percent={data.percentChange}
          />
        )}
      />

Answer 1

我会将对象的对象转换为对象的数组，然后将键（例如BTC_BCN）添加为数组对象中的值（使用您将指定的键）。

例如：

[{ key: "BTC_BCN", "id":7,"last":"0.00000006", "highestBid":"0.00000005","percentChange":"0.20000000"}, 
{ key: "BTC_BTS", "id":14,"last":"0.00000374", "highestBid":"0.00000376","percentChange":"-0.02857142"}]

您可以找到有关如何在堆栈溢出中进行转换的示例。

Answer 2

将对象转换为数组

var listInstance = (Class<Sample>)propertyInfo.GetValue(clr)

结果数组

const test = {
  BTC_BCN: {
  id: 7,
  last: "0.00000006",
  highestBid: "0.00000005",
  percentChange: "0.20000000"
  },
  BTC_BTS: {
  id: 14,
  last: "0.00000374",
  highestBid: "0.00000376",
  percentChange: "-0.02857142"
  },
  BTC_CLAM: {
  id: 20,
  last: "0.00029000",
  highestBid: "0.00028119",
  percentChange: "-0.01854609"
  }
};

const arr = Object.keys(test).map(function(key) {
  return { key: key, ...test[key] };
});

然后在列表中使用数组

Answer 3

我找到了一个决定，在这里进行了检查：http://pythontutor.com/javascript.html#mode=display，但它在React Native中具有不同的行为：

let newArr = Object.keys(obj).map(key => {
   let ar = obj[key]

   // Apppend key if one exists (optional)
   ar.key = key

   return ar
})

如何使用对象对象渲染React Native平面列表？

3 个答案: