一个对象改变另一个对象的反应更新状态

Question

在我的组件中，两个对象都基于这个json文件。但是，当我尝试更改一个对象中的值时，另一个对象会自动更新。我如何只更改一个对象而不是其他对象中字段的值。我的代码是

import React, { Component } from 'react';
import quest from './questions.json';

class Quest extends Component {

    constructor(){
        super();
        this.state = {
            questions: quest,
            keyquest: quest
        }
    }

    componentDidMount(){
        this.changequest(this.state.questions);
    }

    changequest(quests){
        quests.map((data) => {
            data.answer = 'changed value';
        })
        this.setState({questions: quests});
    }

    render() {
        console.log(this.state.questions[0].answer);
        console.log(this.state.keyquest[0].answer);
        return (
            <div>
                <h1>Test</h1>
            </div>
        );
    }
}
export default Quest;

两个console.log语句的输出是相同的“更改值”。我做错了。

Answer 1

您可以尝试将状态中的任务字符串化，然后使用changeQuest方法将其解析回去，这样就不会变异相同的对象。

this.state = {
      questions: JSON.stringify(quest),
      keyquest: JSON.stringify(quest)
    };

changequest(quests) {
    const q = JSON.parse(quests);
    this.setState({
      questions: q.map(data => {
        data.answer = "changed value";
        return data;
      })
    });
  }