React Native - 根据 FlatList 中的另一个 const JSON 过滤 JSON

Question

我正在尝试创建一个 FlatList 并根据我获取的 JSON 和我的 const JSON 的值设置 leftAvatar 图像。我的例子：

    const myicons = [
          {
            title: 'Cotton',
            file: require('../assets/images/cotton.png'),
          },
          {
            title: 'Beef',
            file: require('../assets/images/beef.png'),
          },
        ];
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              leftAvatar={{ source: myicons.filter(myitem => myitem.title === item.product)[0].file }}
              title={item.description}
              subtitle={`${item.product} ${item.description}`}
            />
          )}
          keyExtractor={item => item.index}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );

当代码如上时，我收到 item.product 的未定义错误，而如果我将其硬编码为 myitem.title === 'Beef'，它就像一个魅力。下一行也适用于 item.*

什么是正确的语法？我相信这是最好的方法，但是，如果我不超过这个，我将不得不在获取的 JSON 中设置文件值，这意味着用户需要更多的 KB，我不希望这样。

编辑 我的 this.data.state 值是

[{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Banana, Europe,($/kg)","index":0,"price":0.96277169112575,"product":"Bananas"},{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Banana, US,($/kg)","index":1,"price":1.1505360625,"product":"Bananas"},{"date":"Thu, 31 Oct 2019 00:00:00 GMT","description":"Bananas, Central American and Ecuador, FOB U.S. Ports, US$ per metric ton","index":2,"price":1136.5001201057,"product":"Bananas"},{"date":"Wed, 30 May 2018 00:00:00 GMT","description":"Beef - Choice 1","index":3,"price":192.98,"product":"Beef"},{"date":"Wed, 30 May 2018 00:00:00 GMT","description":"Beef - Select 1","index":4,"price":169.31,"product":"Beef"},{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Beef,($/kg)","index":5,"price":4.15019715,"product":"Beef"},{"date":"Wed, 30 May 2018 00:00:00 GMT","description":"Butter, AA Chicago, lb","index":6,"price":2.425,"product":"Butter"},{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Cocoa,($/kg)","index":7,"price":2.65994,"product":"Cocoa"},{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Coffee Price, Arabica, cents/kg","index":8,"price":2.989685182,"product":"Coffee"}]

Answer 1

根据您的代码，传递给 flatlist 的第一个对象

{
    date: "Thu, 31 May 2018 00:00:00 GMT",
    description: "Banana, Europe,($/kg)",
    index: 0,
    price: 0.96277169112575,
    product: "Bananas"
}

现在你的过滤器函数会像这样

myicons.filter(myitem => myitem.title === 'Bananas')[0].file

但是根据Bananas，myicons 数组中没有任何值。所以它返回一个undefined。

要修复此错误，请修改您的 myicons 以处理所有标题或提供默认属性以在您的结果为undefined 时显示

重要

在 JS 中可以使用 find 代替 filter

myicons.find(myitem => myitem.title === item.product).file

希望这对您有所帮助。如有疑问，请随意。