所以我试图使用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数组中的每个对象都是通过传递给renderItem函数的实际参数的item属性引用的.在这里,使用object destructuring只提取传入对象的item属性,这就是为什么使用{item}.当您将此名称更改为userData(函数参数中缺少该名称)时,您将得到undefined.看看renderItem here的函数签名.

如果您想使用userData而不是item,那么可以将item重命名为userData

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

希望这会有帮助!

React-native相关问答推荐

如何在EXPO路由中重置导航

Reaction-Native-pdf文件不是PDF格式或已损坏

如何根据设备主题更改React Native中状态栏的背景?

防止 React Native 在上下文值更改时重新安装组件

React-native 重置数据库

react native :navigationOptions 中的标题样式不起作用

如何解决Readonly<{}> 类型上不存在属性 navigation&

在 React Native 上为 android 创建自定义 UI 组件,如何向 JS 发送数据?

使用 React-Native 将 content:// URI 转换为 Android 的实际路径

在 LTR 设备上强制 RTL

如何在react-native 中加密和解密文本?

在 Docker 中使用 Fastlane 构建 iOS 应用

在 react-native-maps 中渲染多个标记

如何在 React 中使用带有钩子的生命周期方法?

如何将 Crashlytics 与 React Native 应用程序集成

将 React Native 升级到 0.60-RC2 后找不到库libjsc.so

react-native 元素/目录 struct 设置

错误 React Native CLI 对本机依赖项使用自动链接,但以下模块是手动链接的

如何在本机代码(Java、ObjectiveC/Swift)中读取 AsyncStorage

React Native 中的 CSS 三角形