Question

我有一个FlatList，我从数据库中放入了一些数据。在render方法中，当我进行console.log记录时，state.data会正确显示。但是在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)

FlatList renderItem错误，TypeError：未定义（评估“ item.id”）

1 个答案: