Javascript react.js react本机数组遍历，单击函数

当我使用“setState”通过单击函数来更新数组时，我发现如果添加的元素已经包含在数组中，它不仅会增加数组的长度，还会用新元素替换旧元素

代码如下：

determineOrder = (obj) => {
    let list = this.state.orderList
    
    obj.key = list.length.toString()
    
    list.push(obj)
    console.log(list)
    this.setState({ orderList: list })
}


this.state.detailList.map((item, index) => {
    return (
        <TouchableOpacity style={[styles.blockStyle]} key={index} onPress={()=>determineOrder(item)}>
             <Text style={styles.font} >{this.props.translate ? item.cnName : item.name}</Text>
        </TouchableOpacity> 
    )
 })

determineOrder=（obj）=>{
let list=this.state.orderList
obj.key=list.length.toString（）
列表推送（obj）
console.log（列表）
this.setState（{orderList:list}）
}
this.state.detailList.map（（项目，索引）=>{
返回(
确定顺序（项目）}>
{this.props.translate？item.cnName:item.name}
)
})

---

不能使用推送等操作更新状态。您被指派列出您的状态，它保留引用如果您想复制，您应该复制它，而不是像let list=[…this.state.orderList]这样的引用

determineOrder = (obj) => {
    
    obj.key = list.length.toString()
    
    list.push(obj)
    console.log(list)
    this.setState((prevState) => { 
    return {
             ...prevState, 
             orderList: [...prevState.orderList, obj]
           }
    });
}


this.state.detailList.map((item, index) => {
    return (
        <TouchableOpacity style={[styles.blockStyle]} key={index} onPress={()=>determineOrder(item)}>
             <Text style={styles.font} >{this.props.translate ? item.cnName : item.name}</Text>
        </TouchableOpacity> 
    )
 })

determineOrder=（obj）=>{
obj.key=list.length.toString（）
列表推送（obj）
console.log（列表）
this.setState（（prevState）=>{
返回{
…国家，
orderList:[…prevState.orderList，obj]
}
});
}
this.state.detailList.map（（项目，索引）=>{
返回(
确定顺序（项目）}>
{this.props.translate？item.cnName:item.name}
)
})

再次将同一对象插入数组。在Javascript中，对象是引用类型。更新

obj.key

将更新数组中的现有对象，因为它是同一个对象

您需要创建对象的新副本

const clone = Object.assign({}, obj);
clone.key = list.length.toString();
list.push(clone);

注意：不会深度复制嵌套对象。另一种方法可以是使用

JSON.stringify

和

JSON.parse

const clone = JSON.parse(JSON.stringify(obj))

---

你为什么需要这些图片？您只需编辑粘贴的文本代码即可添加此注释并删除图像。在阅读你的问题时，图片增加了不必要的误解