导入数据变化

Question

我是 React / ES6 的新手，这可能是一个基本问题。我正在创建一个导出 json 文件数组的 .js 文件。此数据不应更改，稍后当我单击 "clear" 按钮时，我想将我的数据重置为该文件中的原始数据。出于某种原因，我对我的状态所做的数据替换正在改变原始导入。任何帮助将非常感激。我很确定在这种情况下我不需要 Immutable.js，但我目前正在使用它，希望能解决这个问题，但到目前为止它还没有奏效。

定时器数据

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

我已经删除了一些代码来尝试保存 space 并显示我的状态初始化和修改的核心组件。连同有关该问题的任何提示和有关不良做法的提示，我们将不胜感激。

感谢您的宝贵时间！

Answer 1

使用 Immutable.Map 不会使 Map 的值不可变。您可能想研究使用 Immutable.fromJS：

如下所示，Map 的值是对传递给构造函数的对象值的引用。

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>

根据您要执行的操作，可能不需要 ImmutableJs。您可以深度克隆参考对象：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);

导入数据变化

Data From Import Changing

state

immutability

ecmascript-6

reactjs

webpack