インポート時のデータ変更

Question

React/ES6を初めて使用しました。これは基本的な問題です。私は、jsonファイルの配列をエクスポートする.jsファイルを作成しています。このデータは変更されません。後で[クリア]ボタンをクリックすると、このファイルから元のデータにデータをリセットします。何らかの理由で私が自分の状態にするデータの置き換えによって、元のインポートが変更されています。どんな助けでも大歓迎です。私はこのシナリオでImmutable.jsを必要としないと確信していますが、私は現在、この問題を取り除くためにこれを使用しています。

TimerData

const nelths = { 
    level: 10, 
    endTime: 1980, 
    objectives: [ 
    { 
     id: 1, 
     objectiveName: "Rokmora", 
     objectiveCompleteTime: null 
    }, 
    { 
     id: 2, 
     objectiveName: "Ularogg Cragshaper", 
     objectiveCompleteTime: null 
    }, 
    { 
     id: 3, 
     objectiveName: "Naraxas", 
     objectiveCompleteTime: null 
    }, 
    { 
     id: 4, 
     objectiveName: "Dargrul", 
     objectiveCompleteTime: null 
    }, 
    ], 
} 
const TimerData = [nelths]; 
export default TimerData; 

輸入

import React, { Component } from 'react' 
import TimerData from './timerData' 
import FontAwesome from 'react-fontawesome' 
import {Map} from 'immutable' 

コンストラクタ

constructor(props) { 
    super(props); 
    //const timerData = Object.assign({}, TimerData[0]); 
    var timerData = Map(TimerData[0]); 
    this.state = { 
     level: timerData.get('level'), 
     endTime: timerData.get('endTime'), 
     objectives: timerData.get('objectives'), 
    } 
} 

変更

var objs = this.state.objectives.slice(); 
objs.forEach(function (element, index, array) { 
    element.objectiveCompleteTime = Date.now(); 
}); 
this.setState(Object.assign({}, this.state, {objectives: objs})); 

クリア

var timerData = Map(TimerData[0]); 
this.setState(Object.assign({}, this.state, {objectives: timerData.get('objectives'), active: false})); 

私が試してみて、スペースを節約し、&変更にinit私の状態のコアコンポーネントを表示するには、コードの一部を切り取ってきました。問題に関するヒントや悪い習​​慣に関するヒントとともに、感謝します。

ありがとうございました！

Answer 1

Immutable.Mapを使用しても、マップの値は不変になりません。 Immutable.fromJSを調べたいと思うかもしれません：

下記のように、Mapの値はコンストラクタに渡されたオブジェクトの値への参照です。あなたがする探しているものを、ImmutableJsが必要とされない可能性がありますによって

const { Map } = Immutable; 
 

 
const parent = { child: [] }; 
 
console.log('Initial parent.child =', parent.child); 
 

 
const map = Map(parent); 
 
const mapChild = map.get('child'); 
 

 
console.log('mapChild === parent.child:', mapChild === parent.child); 
 

 
mapChild.push(1); 
 
console.log('After pushing 1 to mapChild, parent.child =', parent.child);

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>

const { fromJS } = Immutable; 
 
const timerData = { 
 
    level: 10, 
 
    endTime: 1980, 
 
    objectives: [ 
 
    { 
 
     id: 1, 
 
     objectiveName: "Rokmora", 
 
     objectiveCompleteTime: null 
 
    }, 
 
    { 
 
     id: 2, 
 
     objectiveName: "Ularogg Cragshaper", 
 
     objectiveCompleteTime: null 
 
    }, 
 
    { 
 
     id: 3, 
 
     objectiveName: "Naraxas", 
 
     objectiveCompleteTime: null 
 
    }, 
 
    { 
 
     id: 4, 
 
     objectiveName: "Dargrul", 
 
     objectiveCompleteTime: null 
 
    }, 
 
    ], 
 
}; 
 
    
 
const data = fromJS(timerData); 
 
    
 
const updatedData = data.update('objectives', objective => (
 
    objective.map(value => value.set('objectiveCompleteTime', Date.now())) 
 
)); 
 
    
 
console.log('AFTER - updatedData:', updatedData); 
 
console.log('AFTER - data:', data); 
 
console.log('AFTER - timerData:', timerData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>

。あなたは深い参照オブジェクトクローンを作成できます。あなたの現在のオブジェクトのためにHow to Deep clone in javascript

を、JSON.parseとJSON.stringifyは深いクローンを作成します

const nelths = { 
 
    level: 10, 
 
    endTime: 1980, 
 
    objectives: [ 
 
    { 
 
     id: 1, 
 
     objectiveName: "Rokmora", 
 
     objectiveCompleteTime: null 
 
    }, 
 
    { 
 
     id: 2, 
 
     objectiveName: "Ularogg Cragshaper", 
 
     objectiveCompleteTime: null 
 
    }, 
 
    { 
 
     id: 3, 
 
     objectiveName: "Naraxas", 
 
     objectiveCompleteTime: null 
 
    }, 
 
    { 
 
     id: 4, 
 
     objectiveName: "Dargrul", 
 
     objectiveCompleteTime: null 
 
    }, 
 
    ], 
 
} 
 
    
 
const cloned = JSON.parse(JSON.stringify(nelths)); 
 
console.log(cloned); 
 

 
cloned.objectives.forEach(objective => (
 
    objective.objectiveCompleteTime = Date.now() 
 
)); 
 

 
console.log('AFTER'); 
 
console.log('cloned', cloned); 
 
console.log('original', nelths);