ReactNative Flatlist - RenderItem无法正常工作

Question

所以我试图使用React Native的FlatList renderItem属性,但是发生了一些非常奇怪的事情.

该data属性设置为一个数组,其中包含未定义的元素,但是,在renderItem函数中,它给出了一个错误,指出函数的参数是未定义的,除非我调用参数item.

这是我的代码:

export default class Profile extends React.Component {
    onLearnMore = (user) => {
        this.props.navigation.navigate('UserDetail', user)
    }

    render() {
        return (
            <List>
                <FlatList
                    data={data.users}
                    renderItem={( {item} ) => {
                        console.log(item)
                        return (<ListItem
                            roundAvatar
                            title={`${item.fName} ${item.lName}`}
                            onPress={() => this.onLearnMore(item)}
                        />)
                    }}
                />
            </List>
        )
    }
}

如果我换{item}了{userData},那么userData以后在函数中将是未定义的.有谁知道为什么会这样？

Answer 1

原因是,data数组中的每个对象都是通过item传递给renderItemfunction 的实际参数的属性引用的.在这里,您使用对象解构来仅提取item传入对象的属性,这就是您使用的原因{item}.当您将此名称更改为userData(函数参数中缺少)时,您将获得undefined.看看renderItem 这里的功能签名.

如果你想使用userData,而不是item,然后可以重命名item,以userData作为

renderItem= ({item: userData}) => {...}

希望这会有所帮助!

Answer 2

请仔细阅读此答案。我经历了它，浪费了很多时间弄清楚为什么不重新渲染：

我们需要设置状态是否有变化的属性extraData，FlatList如下所示：

<FlatList data={this.state.data} extraData={this.state} .../>

请在此处查看官方文档：

https://facebook.github.io/react-native/docs/flatlist.html