реагировать на обновление состояния одного объекта, изменяя другой объект

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;
      })
    });
  }