javascript - 第一次 TouchableOpacity 推送时从 FlatList 记录的数据为空

Question

问题总结

在我的 Flatlist 中，我想将用户点击的行的值保存在一个数组中

我的 FlatList 的每一行都可以使用 TouchableOpaicty 进行点击。

我尝试过的

我在互联网上搜索过但没有找到任何答案，我尝试过以多种不同的方式将数据保存到数组中

代码

平面列表

    <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

之所以第一次点击按钮，你的console log print undefined是因为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 ] 时，它只会将用户点击的新项目附加到 friend 的初始状态，因此它不会保留添加以跟踪用户点击的内容。如果您需要状态保持更新以跟踪用户点击的内容。你可以做这样的事情。

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

希望这对您有所帮助。