FlatList renderItem error，TypeError:未定义(计算'item.id')

Question

我有一个FlatList，在这里我从我的数据库中放进了一些数据。在render方法中，当我对state.data进行console.log时，将正确显示它。但是在renderItem方法中，我尝试打印item对象，但是它没有显示，然后出现错误：

TypeError: undefined is not an object (evaluating 'item.id')

This error is located at:
in VirtualizedList (at FlatList.js:662)
in FlatList (at PlanView.js:49)
in RCTView (at View.js:44)
in TestLocalisation (at App.js:9)
in App (at withExpoRoot.js:22)
in RootErrorBoundary (at withExpoRoot.js:21)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)

我试着用一些随机的静态数据填充平面数据，它工作得很好。

这是我的密码：

render() {
    console.log("render => " + JSON.stringify(this.state.data));
    return (
        <View style={styles.container}>
            <Button
                style={styles.button}
                onPress={this.addTraining}
                title="ADD">
            </Button>
            <FlatList
                data={this.state.data}
                extraData={this.state}
                renderItem={({ item }) =>
                    <View>
                        <Text>{item.name}</Text>
                        <Text>{item.sport}</Text>
                        <Text>{item.time}</Text>
                        <Text>{item.distance}</Text>
                    </View>}
                keyExtractor={item => item.id}
            />
        </View>
    );
}

这就是在呈现函数中记录的内容：

render => {
"_array":[
{"id":1,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":2,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":3,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":4,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":5,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":6,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":7,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":8,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":9,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":10,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":11,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":12,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":13,"name":"lol","sport":"running","time":120392,"distance":30},
{"id":14,"name":"lol","sport":"running","time":120392,"distance":30}
],"length":14}

Answer 1

问题在于提供给renderItem支柱的函数。该函数将对数组的每个项调用一次。

您的renderItem函数分解它接收的对象，并尝试读取键item的值。在它接收的对象中没有键item，因此item将是undefined，而item.name的访问将失败。

要解决这个问题，必须重构提供给renderItem的函数，以正确地分解该对象：

renderItem={({ name, sport, time, distance }) =>
                    <View>
                        <Text>{name}</Text>
                        <Text>{sport}</Text>
                        <Text>{time}</Text>
                        <Text>{distance}</Text>
                    </View>}

或者根本不使用去角质：

renderItem={item =>
                    <View>
                        <Text>{item.name}</Text>
                        <Text>{item.sport}</Text>
                        <Text>{item.time}</Text>
                        <Text>{item.distance}</Text>
                    </View>}

注意到关于花括号的区别

const withDestrcuturingFn = ({ a, b, c }) => console.log(a)

和

const withoutDestrcuturingFn = (object_with_props_abc) => console.log(object_with_props_abc.a)