FlatList renderItem ошибка, TypeError: undefined (оценивается 'item.id') - PullRequest
Новая
       3

FlatList renderItem ошибка, TypeError: undefined (оценивается 'item.id')

0 голосов
/ 04 июня 2019

У меня есть FlatList, куда я помещаю некоторые данные из моей базы данных. В методе рендеринга 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}

1 Ответ

0 голосов
/ 06 июня 2019

Проблема в функции, поставляемой для 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)
...