React Native - Filter JSON 基于 FlatList 中的另一个 const JSON

Question

我正在尝试创建一个 FlatList 并根据我获取的 JSON 和我的常量 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

根据您的代码，第一个 object 传递给 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 数组中没有任何值。所以它 return 一个 undefined.

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

时显示

重要

在 JS 中可以使用 find 而不是 filter

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

希望对您有所帮助。有疑问欢迎留言。

React Native - Filter JSON 基于 FlatList 中的另一个 const JSON

React Native - Filter JSON based on another const JSON inside FlatList

json

jsx

react-native

react-native-flatlist