React Native - фильтр JSON на основе другого константы JSON внутри FlatList - PullRequest
Новая
       23

React Native - фильтр JSON на основе другого константы JSON внутри FlatList

0 голосов
/ 19 января 2020

Я пытаюсь создать FlatList и установить изображение leftAvatar на основе значения моего выбранного JSON и моего const JSON. Мой пример: 

    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>
    );

Когда код такой, как указано выше, я получаю ошибку undefined для item.product, в то время как если я жестко закодирую его как myitem.title === 'Beef', он работает как шарм , Следующие строки также хорошо работают с элементом. *

Какой синтаксис подходит для этого? Я считаю, что это лучший способ для go, но, если я не превзойду это, мне придется установить значение файла в извлеченном JSON, что означает больше КБ для пользователя, и я не хочу этого .

РЕДАКТИРОВАТЬ Мои значения 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"}]

1 Ответ

1 голос
/ 19 января 2020

Согласно вашему коду, первый объект, который переходит в плоский список 

{
    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

Но у вас нет значения в myicons массив в соответствии с Bananas. Таким образом, он возвращает undefined.

. Чтобы исправить эту ошибку, измените ваш myicons, чтобы он обрабатывал все заголовки, или предоставьте свойство по умолчанию, которое будет отображаться, когда ваш результат будет undefined

Важно

Вы можете использовать поиск вместо фильтра в JS

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

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

...