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

Posted 2023-02-22

【中文标题】将按下的项目插入到 react-native 的数组中

【英文标题】：Insert the pressed item into an array in react-native

【发布时间】：2016-12-21 19:00:06

【问题描述】：

我在数组 (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 或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至componentWillMount。

可能的未处理承诺拒绝（id：0）： _this.state.selectedTags.push 不是函数 TypeError: _this.state.selectedTags.push 不是函数

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

【参考方案1】：

onPress=this.insertTag(tag)

问题：在你的render 函数中，你直接调用了一个改变状态的函数。 Render 函数不应该调用任何更新状态的函数。

那么如何拨打onPress？

Ans: 如下所示

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 事件时，就会调用该函数。

谷歌“箭头函数”了解更多。

【讨论】：

哇.. 我从来没有意识到这一点。它的工作，谢谢你的先生。你能帮我多了解一下这个概念吗？调用onPress=this.insertTag(tag)这样的函数会自动调用render上的函数，而调用onPress => () = this.insertTag(tag) 这样的函数只会调用press上的函数？

您好，我已经编辑了解释箭头功能的答案