javascript - 将按下的项目插入react-native数组中

我在数组（tagList）中有一个标记对象列表，我正在从服务器中提取该列表并将其存储到状态中。成功获取后，我将每个项目映射到ScrollView中。

export default class RegisterTags extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tagList: [],
            selectedTags: [],
        }
    }

    componentWillMount() {
        api.getTagsOnRegister()
            .then((res) => {
                this.setState({
                    tagList: res
                })
            })
    }

    insertTag = (tag) =>{
        this.setState({
            selectedTags: this.state.selectedTags.push(tag)
        })
    }


    render() {
        return(
            <View style={styles.container}>
                <ScrollView contentContainerStyle={styles.ScrollViewContainer}>
                    {this.state.tagList.map((tag) => {
                        return(
                            <View style={styles.tagStyle} key={tag.id} onPress={this.insertTag(tag)}>
                                <Text style={styles.tagText}>{tag.name}</Text>
                            </View>
                        )
                    })}
                </ScrollView>
            </View>
        )
    }
}

我想要实现的是，当我按下任何标签时，我想将该对象添加到selectedTags数组中。但是我得到了错误：


  警告：setState（...）：在现有状态转换期间（例如在render或另一个组件的构造函数中）无法更新。渲染方法应该纯粹是道具和状态的函数；构造函数的副作用是反模式，但可以移至componentWillMount。
  
  可能的未处理的承诺拒绝（标识：0）：
  _this.state.selectedTags.push不是函数
  TypeError：_this.state.selectedTags.push不是函数


如何将按下的标签项添加到selectedTags数组中？

最佳答案

onPress={this.insertTag(tag)}

问题：在您的render函数中，您正在直接调用更改状态的函数。 Render函数绝不能调用任何更新状态的函数。

那么如何调用onPress？

答：如下

onPress = {() => {this.insertTag(tag) }}

代码现在可以工作了吗？
答案是否定的。

您必须将视图放入TouchableHighlight并将onPress方法从View移到TouchableHighlight。
然后希望您的代码可以工作。我假设一切都是安装程序属性。

~~~~~~编辑1 ~~~~~~~~~

onPress={this.insertTag(tag)}和onPress = {() => {this.insertTag(tag) }}有什么区别

花括号中的所有东西都是react jsx中的表达式。现在，onPress={this.insertTag(tag)}计算大括号内的表达式并将其分配给onPress属性，在您的情况下，this.insertTag恰好会更新状态。

而onPress = {() => {this.insertTag(tag) }}时，在计算花括号时返回一个函数，但不调用该函数。当触发onPress事件时，将调用该函数。

谷歌“箭头功能”更多。

关于javascript - 将按下的项目插入react-native数组中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38957333/