无法在本机反应中使用来自 FlatLists renderItem 的项目值

Question

我对编码很陌生，所以真的很挣扎，但我相信这很简单。

当使用FlatlistrenderItemitem时

_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 is not an object（评估 '_global.default.products[item].title

<Text>{GLOBAL.products[**{**item**}**].title}</Text> 不起作用。还有_renderItem = ( **{**item**}** ) => {。

<Text>{GLOBAL.products[9].title}</Text> 工作正常。也试过GLOBAL.products[parseInt(item)].title

Answer 1

很明显你不知道 JavaScript 对象和子调用。当你调用一个孩子但它的父母不存在时，你肯定也会在 React Native 的 Text 组件中遇到错误，你应该至少传递一个空字符串。

你应该防御性地培养孩子的连锁呼唤。为此，我建议您阅读 optional chaining 并使用 this link 将其添加到您的项目中。

安装后你可以编写_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 >
);

我更喜欢第二个。这种防御性编程可防止您的应用崩溃。