Question

问题摘要

在我的平面列表中，我想将用户单击的行的值保存在数组中

我的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)
        )
    }

预期结果

每次单击一行时，该行的值应附加到数组的末尾。

实际结果

第一次单击行时，没有任何值添加到数组。以后每次单击该行时，前一次单击的值都会添加到数组的末尾。

Answer 1

第一次单击该按钮时，控制台日志打印未定义的原因是setState是异步的。因此，如果要在之后查看最新状态，则无需等待setState即可直接打印状态。 setState完成后，您需要将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

希望获得帮助。

首次TouchableOpacity推送时，从FlatList记录的数据为空

1 个答案: