ReactNative Flatlist - RenderItem 不工作答案

【问题标题】：ReactNative Flatlist - RenderItem not workingReactNative Flatlist - RenderItem 不工作
【发布时间】：2018-08-04 13:25:46
【问题描述】：

所以我尝试使用 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.users数组又是怎么做的；它应该有 'key': 'value' 对对象
你在哪里设置data？ console.log 有输出吗？
Data 只是 JSON 对象的数组，console.logging 不会做任何有用的事情：如果我记录数据，我得到我期望的，如果我记录项目，我得到我期望的，但是如果我将变量名称更改为用户我得到未定义

标签： javascript react-native undefined react-native-flatlist

【解决方案1】：

原因是，data 数组中的每个对象都是通过传递给renderItem 函数的实际参数的item 属性来引用的。在这里，您使用object destructuring 仅提取传入对象的item 属性，这就是您使用{item} 的原因。当您将此名称更改为userData（函数参数中缺少该名称）时，您将获得undefined。看看renderItemhere的函数签名。

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

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

希望这会有所帮助！

【讨论】：

这真的帮助了我..我浪费了几个小时想知道为什么平面列表没有渲染只是为了意识到我在解构部分使用了错误的变量。非常感谢
@Prasun，文档在哪里解释了这种解构和命名要求？不是厚颜无耻的评论；我正在尝试学习如何阅读文档，但我不理解或不认识这些要求的说明。

【解决方案2】：

请仔细阅读此答案。我经历了它并浪费了很多时间来弄清楚为什么它没有重新渲染：

如果状态有任何变化，我们需要设置FlatList 的extraData 属性，如下所示：

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

请在此处查看官方文档：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

setData(response)

所以我把它变成了这个

setData([response])

而且效果很好

【讨论】：

【解决方案6】：

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

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

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

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

【讨论】：