FlatList renderItem error, TypeError: undefined (evaluating 'item.id')

问题

I have a FlatList where I put some data in from my database. In the render method, the state.data is correctly displayed when I console.log it. But in the renderItem method I try to print the item object but it doesn't display and then the error appears:

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)

I tried to fill the flatlist data with some random static data and it works perfectly.

There is my code:

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>
    );
}

And this is what is logged in the render function:

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}

回答1:

The issue is in the function supplied to the renderItem prop. The function will be called once for each item of you array.

Your renderItem function destructures the object which it receives and tries to read the value for the key item. In the object it receives there is no key item, therefore item will be undefined and the access of item.name will fail.

To resolve the issue you must refactor the function supplied to renderItem to destrcuture that object correctly:

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

or not use destrcuturing at all:

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

Note the difference regarding the curly brackets between

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

and

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

来源：https://stackoverflow.com/questions/56446720/flatlist-renderitem-error-typeerror-undefined-evaluating-item-id

标签

react-native

react-native-flatlist