javascript - 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 数组中的每个对象都是通过传递给 renderItem 函数的实参的 item 属性来引用的。在这里，您使用的是 object destructuring仅提取传入对象的 item 属性，这就是您使用 {item} 的原因。当您将此名称更改为 userData(函数参数中缺少该名称)时，您将获得 undefined。查看 renderItem 的函数签名 here .

如果你想使用userData而不是item，那么你可以将item重命名为userData作为

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

希望这会有所帮助!