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

请仔细阅读此答案。我体验了它，浪费了很多时间弄清楚为什么它不重新渲染：

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

FlatList

请在此处查看官方文档：

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

Answer 2

我在物品周围缺少花括号{}。添加它们之后，现在可以正常工作了。

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

Answer 3

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

ReactNative Flatlist - RenderItem无法正常工作

3 个答案: