Данные, записанные из FlatList пустыми при первом нажатии TouchableOpacity - PullRequest
Новая
       20

Данные, записанные из FlatList пустыми при первом нажатии TouchableOpacity

0 голосов
/ 10 апреля 2019

Краткое описание проблемы

Внутри моего плоского списка я хочу сохранить значение строки, по которой пользователь щелкнул, в массиве

Каждая строка моего FlatList доступна для нажатия с помощью TouchableOpaicty.

То, что я пробовал

Я искал в интернете, не найдя ответа, и попытался сохранить данные в массив разными способами

Код

FlatList 

    <FlatList
                        data={this.state.friends}
                        renderItem={({item}) => {
                            console.log('item', item);
                            return( 
                                <TouchableOpacity
                                onPress={() => this.add(item.key)}
                            >
                                <ImageBackground
                                    style={styles.friendBubble}
                                    source={require('../../assets/images/friendDisplay.png')}
                                >
                                    <Text style={styles.friendText}>{item.key}</Text>
                                </ImageBackground>
                            </TouchableOpacity>
                            )
                        }}
                    />

TouchableOpacity onPress функция 

add = (item) => {
        this.setState(
            {friendsInComp: [...this.state.friends, item]}, 
            console.log('this.state.friend', this.state.friendsInComp)
        )
    }

Ожидаемые результаты

Каждый раз, когда я щелкаю по строке, значение этой строки должно добавляться в конец массива.

Фактические результаты

При первом щелчке строки значение не добавляется в массив. При каждом следующем щелчке по строке значение из предыдущего щелчка добавляется в конец массива.

1 Ответ

1 голос
/ 10 апреля 2019

Причина, по которой при первом нажатии кнопки печать журнала консоли не определена, заключается в том, что setState является асинхронным. Таким образом, он напрямую печатает состояние, не ожидая завершения процесса setState, если вы хотите увидеть последнее состояние послеsetState Finish, вам нужно поместить console.log в функцию .. 

add = (item) => {
  this.setState({
    friendsInComp: [...this.state.friends, item ]},
    () => { console.log('this.state.friend', this.state.friendsInComp) }
  )
}

и просто отметим, что когда вы сделали [...this.state.friends, item ], он только добавляет исходное состояние друзей с новым элементом, который нажимает пользователь, таким образом, он не продолжает добавлять, чтобы отслеживать, чтопользовательский клик.Если вам нужно обновлять состояние, чтобы отслеживать клик пользователя.Вы можете сделать что-то вроде этого. 

add = (item) => {
  const { friendsInComp } = this.state;
  
  this.setState({
    friendsInComp: !friendsInComp ? [...this.state.friends, item ] : [...friendsInComp, item]},
    () => { console.log('this.state.friend', this.state.friendsInComp) }
  )
}

используйте !friendsInComp, если вы не определяете friendsInComp как пустой массив внутри конструктора.в противном случае используйте friendsInComp.length == 0

надеюсь, эта помощь.

...