代码之家 › 专栏 › 技术社区 › Corrado

ReactNative平面列表-RenderItem不工作

react-native-flatlist undefined react-native javascript

Corrado · 技术社区 · 7 年前

所以我尝试使用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 稍后将在函数中未定义。有人知道为什么会这样吗?

6 回复 | 直到 7 年前

Prasun 7 年前

原因是 data 数组通过引用 item 传递给的实际参数的属性 renderItem 作用这里,您正在使用 object destructuring 仅提取 项目 属性,这就是为什么要使用 {item} . 当您将此名称更改为 userData (函数参数中缺少),您将得到 undefined . 查看函数签名 renderItem公司 here .

如果要使用 用户数据 而不是 项目 ,然后可以重命名 项目 到 用户数据 像

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

希望这会有所帮助!

atulkhatri 5 年前

请仔细阅读此答案。我经历了这一过程,浪费了很多时间来找出为什么它没有重新渲染:

我们需要设置 extraData 支柱 FlatList 如果状态有任何变化:

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

请参见此处的官方文件:

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

Pravin Ghorle 5 年前

我在这件物品周围少了一个卷发。添加它们后,现在它工作正常。

renderItem= {({item}) => this.Item(item.title)}

Antier Solutions 3 年前

   renderItem={({ item, index }) => {
                return (
              <Text>{item.fName + item.lName}</Text>
                );
              }}

user14877357 user14877357 3 年前

好的,我通过这样做来解决这个问题我的代码是这样的=

setData(response)

所以我把它转向这个

setData([response])

而且效果很好

Ibad Shaikh 3 年前

我们中的任何一个人都可能犯下一个非常粗心的错误:

我拼错了renderItems。道具名称为 renderItem公司

<FlatList
      data={myData}
      keyExtractor={(item, index) => item.id}
      renderItem={({item}) => <View></View>}
 />

令我惊讶的是,react native没有向我指出renderItems不是有效的道具名称或与此相关的任何警告。无论如何!