我必须在 FlatList 的 renderItem 中使用 item.item.property 而不是 item.property

Question

我有这个代码

<FlatList
    data={this.state.music_genres}
    extraData={this.state}
    renderItem={(genre) => (
        <ListItem>
            <CheckBox
                onPress={this.onGenreChange.bind(this, item.item, genre.item.id)}
                checked={this.eventHasGenre(item.item, genre.item.id) > -1 ? true : false} />
            <Body>
                <Text>{genre.item.name}</Text>
            </Body>
        </ListItem>
    )}
/>

它有效，但如您所见，我必须使用 "genre.item.id"（或 "genre.item.name"）而不是简单地 "genre.id".
如果我更改 renderItem （如文档所说）

renderItem={({genre}) => ( // look brackets around "genre"

然后我尝试

...
<Text>{genre.name}</Text>
...

我收到这个错误

Cannot read property 'name' of undefined

这是this.state.music_genres

的值

[{…}]
0: {id: 7, name: "Swing", plural: null, language: "it", genre_type: "music"}
length: 1

为什么我不能使用"genre.id"？

Answer 1

你不能使用 ({genre}) 因为这是一个对象解构。在这个参数中将有一个对象（由 react 传递）具有属性 item，如下所示：

obj : { item: {...}}

所以当你试图从这个 obj 得到 genre 时，你只会得到 undefined 因为在这个对象参数中没有类型。

只需执行 renderItem={({item}) => ( 并使用 item.id 就可以了。

我必须在 FlatList 的 renderItem 中使用 item.item.property 而不是 item.property

I have to use item.item.property in renderItem of a FlatList intead of item.property

javascript

jsx

react-native

react-native-flatlist