Question

我正在将常量对象值分配给临时状态对象，并且在更改临时对象时，常量对象值也被更改了

我已经声明了一个常量对象值

 const dict ={  
    '2019-07-10': [{text: 'Dr Eddie A Rosa'},{text: 'Dr Shahida N Siddiqui'}],  
    '2019-07-11': [{text: 'Dr Dae W Lee'}],
   '2019-07-12': [{text: 'Dr Lisa F Brodkin'},{text: 'Dr Eddie A Rosa'}]}

我的状态就像

export default class ScheduleCalendar extends Component {
 constructor(props) {
        super(props);
this.state = { tempdict:{}}
}

在函数调用中，我将const dict的值分配给临时dict并操纵临时dict

ondaypress =(date) => {
// Here date value is '2019-07-11'
        console.log('Inside the update markers of calendar.js new')


 this.setState({ tempdict: Object.assign({}, dict) }, () => 
{
 if(this.state.tempdict[date]) // Checking whether tempdict has the key date or not
        {
            this.state.tempdict[date].push({text:'Dr Beth' }) 
        }
        else{
          this.state.tempdict[date] = [{text:'Dr Beth'}]
        }
    })     
     }
    }

这里对象tempdict和dict都被更改了，我们得到的输出为

dict={
'2019-07-10': [{text: 'Dr Eddie A Rosa'},{text: 'Dr Shahida N Siddiqui'}],
'2019-07-11': [{text: 'Dr Dae W Lee'},{text:'Dr Beth'}],
'2019-07-12': [{text: 'Dr Lisa F Brodkin'},{text: 'Dr Eddie A Rosa'}]
}

tempdict ={
'2019-07-10': [{text: 'Dr Eddie A Rosa'},{text: 'Dr Shahida N Siddiqui'}],
'2019-07-11': [{text: 'Dr Dae W Lee'},{text:'Dr Beth'}],
'2019-07-12': [{text: 'Dr Lisa F Brodkin'},{text: 'Dr Eddie A Rosa'}]}

预期是应该只更改模板，而不应该更改

dict应该像

dict ={
'2019-07-10': [{text: 'Dr Eddie A Rosa'},{text: 'Dr Shahida N Siddiqui'}],
'2019-07-11': [{text: 'Dr Dae W Lee'}],
'2019-07-12': [{text: 'Dr Lisa F Brodkin'},{text: 'Dr Eddie A Rosa'}]
}

我们也尝试过Object.freeze（），但是得到的结果相同

Answer 1

将对象分配给状态时，它也会存储对象引用。这就是为什么在状态中添加或删除任何内容都会影响所有引用的对象的原因。因此，首先必须在分配之前使用 JSON.parse 和 JSON.stringify 转换对象。

将对象分配代码Object.assign({}, dict)替换为 Object.assign({}, JSON.parse(JSON.stringify(dict))

在分配随机更改的对象的值时进行本机响应

1 个答案: