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 to extract only item property of the passed in object, thats why u are using {item}. When you are changing this name to userData (which is missing in the function argument), you are getting undefined. Have a look at the function signature of renderItem here.

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

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

希望这会有所帮助！

Answer 2

请仔细阅读本回答。我体验过，浪费了很多时间才搞清楚为什么不重新渲染：

如果状态发生任何变化，我们需要设置 FlatList 的 extraData 属性：

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

请在此处查看官方文档：

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

Answer 3

我缺少项目周围的大括号 { }。添加后，现在可以正常使用了。

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

Answer 4

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

Answer 5

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

setData(response)

所以我把它变成这个

setData([response])

而且效果很好

Answer 6

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

我拼错了 renderItems。道具名称是 renderItem

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

我很惊讶 react-native 没有向我指出 renderItems 不是有效的 prop 名称或与此相关的任何警告。不管怎样！

ReactNative Flatlist - RenderItem 不工作

ReactNative Flatlist - RenderItem not working

javascript

undefined

react-native

react-native-flatlist