Невозможно использовать значение элемента из FlatLists renderItem в реагировать родной - PullRequest
Новая
       15

Невозможно использовать значение элемента из FlatLists renderItem в реагировать родной

0 голосов
/ 15 апреля 2020

Я довольно новичок в кодировании, поэтому с этим действительно борюсь, но я уверен, что это что-то простое.

При использовании Flatlist renderItem item 

_renderItem = ( item ) => {
    return (<View style={{ flex: 1 }}>
        <Text>{item}</Text>
        <Text>{GLOBAL.products[item].title}</Text>
    </View >)
};

render() {
    return (
        <View style={styles.list}>
            <FlatList
                data={[9,10]}
                renderItem={ this._renderItem} />
        </View>
    )
}

<Text>{item}</Text> работает нормально и сначала отрисовывает 9, а затем отрисовывает 10.

Но <Text>{GLOBAL.products[item].title}</Text> дает мне ошибку:

TypeError: TypeError: undefined не является объектом ( Оценка '_global.default.products [item] .title

<Text>{GLOBAL.products[**{**item**}**].title}</Text> не работает, а также _renderItem = ( **{**item**}** ) => {.

<Text>{GLOBAL.products[9].title}</Text> работает отлично. также попробовал GLOBAL.products[parseInt(item)].title

1 Ответ

0 голосов
/ 16 апреля 2020

Очевидно, что вы не знаете о JavaScript объектах и ​​дочерних вызовах. когда вы вызываете потомка, но его родитель не существует, вы определенно получаете ошибку также в компоненте Text React Native, вам следует передать хотя бы пустую строку.

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

. После установки вы можете написать функцию _renderItem как показано ниже: 

_renderItem = item => (
  <View style={{ flex: 1 }}>
    <Text>{item}</Text>
    <Text>{GLOBAL?.products[item]?.title || ''}</Text>
  </View >
);

Или есть лучший способ использовать lodash.get, установив его с yarn add lodash.get или npm install --save lodash.get, а затем использовать его, как показано ниже: 

import get from 'lodash.get';

~~~

_renderItem = item => (
  <View style={{ flex: 1 }}>
    <Text>{item}</Text>
    <Text>{get(GLOBAL, ['products', 'item', 'title'], '')}</Text>
  </View >
);

Я предпочитаю второй. это защитное программирование предотвращает сбой вашего приложения.

...