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

Question

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

使用时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 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 对象和子调用。当你调用一个孩子但它的父母不存在时，你肯定会在TextReact Native 的组件中遇到错误，你应该至少传递一个空字符串。你应该防御性地培养孩子的连锁呼唤。为此，我建议您阅读有关可选链接的信息，并使用此链接将其添加到您的项目中。安装后可以编写如下_renderItem函数：_renderItem = item => (&nbsp; <View style={{ flex: 1 }}>&nbsp; &nbsp; <Text>{item}</Text>&nbsp; &nbsp; <Text>{GLOBAL?.products[item]?.title || ''}</Text>&nbsp; </View >);或者有一个更好的使用方法，通过使用orlodash.get安装它，然后像下面这样使用它：yarn add lodash.getnpm install --save lodash.getimport get from 'lodash.get';~~~_renderItem = item => (&nbsp; <View style={{ flex: 1 }}>&nbsp; &nbsp; <Text>{item}</Text>&nbsp; &nbsp; <Text>{get(GLOBAL, ['products', 'item', 'title'], '')}</Text>&nbsp; </View >);我更喜欢第二个。这种防御性编程可防止您的应用程序崩溃