как получить доступ к свойству внутри другого свойства в том же классе

Question

Я - игрок Noob реагирования, я просто слонялся вокруг своего кода, чтобы добавить к нему еще несколько опций, теперь я хочу сделать что-то, что требует доступа к свойству в объекте состояния из другого свойства в том же объекте состояния,это мой код:

class App extends Component {
    state = {
        persons : [
          {name: "parsa", age: 45},
          {name: "cena", age: 98},
          {name: "jamil", age: 23}
        ],
    defaultPersons: [...this.state.persons]
    }
}

Здесь мне нужно скопировать свойство people в свойство defaultPersons, возможно ли это?как я могу это сделать?

извините за любую путаницу, и

Спасибо всем:)

Answer 1

вы также можете использовать componentDidMount для обновления исходного состояния

class App extends Component {
    state = {
        persons : [
          {name: "parsa", age: 45},
          {name: "cena", age: 98},
          {name: "jamil", age: 23}
        ],
    defaultPersons: []
    }

     componentDidMount () {
     this.setState({
     defaultPersons: [...this.state.persons]
    })
  }
}

Answer 2

Есть простой способ добиться того, что вам нужно: инициализировать state в constructor

class App extends Component {
    constructor() {
         this.state = {
             defaultPersons : [
               {name: "parsa", age: 45},
               {name: "cena", age: 98},
               {name: "jamil", age: 23}
             ]
         };
         this.state.persons = [...this.state.defaultPersons];
     }
}

Но есть некоторые нюансы.

1. Состояниедолжен содержать только динамическую информацию, которая влияет на внешний вид компонента (поскольку любое изменение в .state с setState вызывает render()).Вам действительно нужно, чтобы defaultPersons был частью .state?Я считаю, что лучше установить его прямо в this.defaultPersons или даже const вне this.

2. Операция, которую вы запрашивали (и мой вариант выше), делает мелкую копию,Поэтому любая мутация defaultPersons[1] может изменить элемент persons[1], если ссылка еще не была изменена.И хотя изменение данных в state само по себе является плохой идеей, я хотел бы выделить эту вещь.

Answer 3

Это невозможно за один шаг, потому что нет ссылки this.state.persons до тех пор, пока она не будет определена, это ситуация с куриным яйцом.Это не относится к свойствам класса, такая же проблема может возникнуть в других ситуациях:

const foo = {
  bar: 1,
  baz: foo.bar // there's no foo at this moment.
};

Проблема возникает из-за того, что defaultPersons не должен быть частью состояния.Кажется, это постоянная, которая не изменилась.В этом случае defaultPersons может быть отдельным свойством:

class App extends Component {
    static defaultPersons = [
      {name: "parsa", age: 45},
      {name: "cena", age: 98},
      {name: "jamil", age: 23}
    ];

    state = {
        persons : [...App.defaultPersons]
    }

    revertToDefaultPersons() {
        this.setState(state => ({
            ...state,
            persons : [...App.defaultPersons]
        }));
    }
}

Или просто константой, определенной вне класса.Это делает вещи проще, но может привести к меньшей тестируемости.

Answer 4

Вы можете определять людей за пределами штата и распространять массив в нужные места.Я, однако, скажу, что вы действительно должны подумать о том, почему вы это делаете.Есть ли способ, которым вы можете высушить свой код, чтобы вам не нужны два одинаковых объекта в состоянии?

constructor(props) {
    super(props);
    const persons = [{key:'value'}, {key:'value'}];
    this.state = {
       persons: [...persons],
       defaultPersons: [...persons],
    }
}