Поэтому я пытаюсь использовать свойство Reader 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 будет позже не определен в функции. кто-нибудь знает, почему это произошло?

22
Corrado 24 Фев 2018 в 20:30

3 ответа

Лучший ответ

Причина в том, что на каждый объект в массиве data ссылается свойство item фактического параметра, переданного функции renderItem. Здесь вы используете деструктуризацию объекта для извлечения только item свойства из переданного объекта, поэтому вы используете {item}. Когда вы меняете это имя на userData (которого нет в аргументе функции), вы получаете undefined. Посмотрите на подпись функции renderItem здесь .

Если вы хотите использовать userData вместо item, вы можете переименовать item в userData как

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

Надеюсь, это поможет!

30
Prasun 26 Фев 2018 в 18:11

Пожалуйста, внимательно прочитайте этот ответ. Я испытал это и потратил много часов, чтобы понять, почему это не было повторным рендерингом:

Нам нужно установить extraData prop of FlatList, если есть какие-либо изменения в состоянии, например, так:

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

Пожалуйста, смотрите официальную документацию здесь:

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

6
atulkhatri 25 Апр 2019 в 12:28

Я скучал по фигурным скобкам {} вокруг предмета. После их добавления теперь все работает нормально.

renderItem= {({item}) => this.Item(item.title)}
0
Pravin Ghorle 25 Окт 2019 в 08:16