无法在本机反应中使用来自 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 => (

  <View style={{ flex: 1 }}>

    <Text>{item}</Text>

    <Text>{GLOBAL?.products[item]?.title || ''}</Text>

  </View >

);

或者有一个更好的使用方法，通过使用orlodash.get安装它，然后像下面这样使用它：yarn add lodash.getnpm 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 >

);

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