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

我显示了两个选择下拉列表，一个显示开始时间，一个显示结束时间。这两种状态

start_hours

和

end_hours

都使用从同一文件导入的数据。我希望这样，当用户选择开始时间时，结束时间将仅显示在所选开始时间之后的小时数。但是，在尝试过滤/禁用以前的

结束时数

时，

开始时数

也受到影响

实现结果的唯一方法是使用相同的数据创建一个重复文件，为其指定不同的导入名称，然后将其设置为初始状态。这是令人难以置信的冗余，我相信有一个更干净的方法来做到这一点

泰晤士报

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\u hours

上进行过滤/禁用，从而使两个状态对象完全相同。我唯一能够实现过滤掉的

end_hours

的方法是导入相同的json文件两次：

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

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

---

这就是所谓的深度克隆

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

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: JSON.parse(JSON.stringify(hours)), 
 end_hours: JSON.parse(JSON.stringify(hours))
}

---

为什么

this.state={start\u hours:times，…}

不是`this.state={start\u hours:hours}？？《泰晤士报》的参考文献来自哪里。也许这是因为引用错误？react状态是不可变的（意味着它不能就地更改），只能通过设置状态进行更改。也许可以尝试在每次之后记录状态event@Hamuel很抱歉我更正了，它应该是

开始\u hours:hours

，我打错了。我确实尝试通过setState进行更改，但仍然无法正常工作。我的问题是，当我只想更改

end\u小时时，它同时更改了
start\u小时
和
end\u小时
好的，那么您是否尝试过
{start\u小时：JSON.stringify（小时）），end\u小时：JSON.parse（JSON.stringify（小时）），}
@Hamuel这很有效！你能解释一下原因吗？