web-dev-qa-db-ja.com

ReactNative Flatlist-RenderItemが機能しない

だから私は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} with {userData}の場合、userDataは関数の後半で未定義になります。なぜこれが起こるのか誰にも分かりますか？

javascriptreact-nativeundefinedreact-native-flatlist
9
Corrado

理由は、data配列内のすべてのオブジェクトが、item関数に渡される実際のパラメーターのrenderItemプロパティを介して参照されるためです。ここでは、 object destructuring を使用して、渡されたオブジェクトのitemプロパティのみを抽出しています。これが、uが{item}を使用している理由です。この名前をuserData（関数の引数にはありません）に変更すると、undefinedになります。 renderItemhere の関数シグネチャを見てください。

userDataの代わりにitemを使用する場合は、itemの名前をuserDataに変更できます。

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

これが役立つことを願っています！

19
Prasun

この回答を注意深くお読みください。私はそれを経験し、なぜそれが再レンダリングされなかったのかを理解するために何時間も無駄にしました：

次のような状態に変化がある場合は、extraDataのFlatList propを設定する必要があります。

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

こちらの公式ドキュメントをご覧ください。

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

5
atulkhatri