javascript - ReactNative Flatlist-RenderItem不起作用

所以我试图使用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。有谁知道为什么会这样吗？

最佳答案

原因是，data数组中的每个对象都是通过传递给item函数的实际参数的renderItem属性引用的。在这里，您使用object destructuring仅提取传入对象的item属性，这就是您使用{item}的原因。当您将此名称更改为userData(在function参数中缺少)时，您会得到undefined。看一下renderItem here的功能签名。

如果要使用userData而不是item，则可以将item重命名为userData，如下所示:

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

希望这会有所帮助!