Question

我正在显示2个select下拉列表，一个显示开始时间，一个显示结束时间。状态start_hours和end_hours都使用从同一文件导入的数据。我希望当用户选择开始时间时，结束时间将仅显示选定开始时间之后的小时。但是，在尝试过滤/禁用先前的end_hours时，start_hours也受到了影响。

我能够获得结果的唯一方法是使用相同的数据创建一个重复的文件，为其指定不同的导入名称，并将其设置为初始状态。这是令人难以置信的冗余，我敢肯定有一种更干净的方法可以做到这一点。

times.js

export default [
    {
        "time": "07:05",
        "display": "07:05 AM",
        "disabled": false
    },
    {
        "time": "07:0",
        "display": "07:10 AM",
        "disabled": false
    },
    {
        "time": "07:15",
        "display": "07:15 AM",
        "disabled": false
    },

App.js：

import React from 'react';
import hours from './data/hours';
....
...
  constructor(props) {
    super(props);

    this.state = {
               start_hours: hours,
               end_hours: hours
          };
  }
.... 
.....

  onStartHourClick(e) {
       ....
       ....
       let endTime = this.state.end_hours, state = Object.assign({}, this.state);
        this.state.end_hours.map((time, index) =>{
          if(Date.parse(`${day} ${e.target.value}`) >= Date.parse(`${day} ${time.time}`)) {
            state.end_hours[index].disabled = true;
          }
        });
        this.setState({state});
  }

我成功编写的代码过滤/禁用了前几个小时，但它也在start_hours上执行，因此使两个状态对象相同。我只能过滤出end_hours的唯一方法是两次导入SAME json文件：

import hours from './data/hours';
import hours2 from './data/hours2';
...
...
  constructor(props) {
    super(props);

    this.state = {
               start_hours: hours,
               end_hours: hours2
          };
  }

Answer 1

这被称为深度克隆

How do I correctly clone a JavaScript object?

当前，当您设置状态时，您的代码正在引用同一对象

const a = {a: 1, b: 1}
const b = a
a['a'] = 2
b['a'] = 3

输出是什么？有人可能会说它是2，但实际上是3，因为它引用的是同一对象，该对象不是副本。下面的技术是在javascript中克隆对象的快速而肮脏的方法

const a = {a: 1, b: 1}
const b = JSON.parse(JSON.stringify(a))
a['a'] = 2
b['a'] = 3

现在console.log（a）将返回2，而console.log（b）将返回3，因为它不再引用同一对象

因此，您的设置状态应如下所示，以确保您未引用相同的对象，并确保start_hours和end_hours是其自己的对象，这两个对象都不需要进行深度复制，只需要复制其中一个< / p>

{
 start_hours: JSON.parse(JSON.stringify(hours)), 
 end_hours: JSON.parse(JSON.stringify(hours))
}

如何更改同一导入文件的多个状态

1 个答案: