Как изменить несколько состояний одного и того же импортированного файла

Question

Я отображаю 2 выпадающих списка, один из которых отображает начальный час, другой - конечный час. Оба состояния 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, это импортировать тот же самый 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

Это называется глубоким клонированием

Как правильно клонировать объект JavaScript?

В настоящее время ваш код ссылается на тот же объект, когда вы устанавливаете состояние

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 являются его собственным объектом, и им не нужно выполнять глубокое копирование только одногоиз них должно быть

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