Обновление объекта с помощью setState в React

Question

Обновление объекта с помощью setState в React

возможно ли вообще обновить свойства объекта с помощью setState?

что-то типа:

this.state = {

   jasper: { name: 'jasper', age: 28 },

}

Я пробовал:

this.setState({jasper.name : 'someOtherName'});

и так:

this.setState({jasper:{name:'someothername'}})

первая синтаксическая ошибка, а вторая просто ничего не делает. Есть идеи?

947 7

reactjs state

7 ответов:

Comments

Ничего не найдено.

Mayank Shukla · Accepted Answer · 2017-09-07 17:03:37

есть несколько способов сделать это.

1 - Простое:

создать копию jasper затем сделайте изменения в этом:
let jasper = Object.assign({}, this.state.jasper);    //creating copy of object
jasper.name = 'someothername';                        //updating value
this.setState({jasper});
вместо Object.assign мы также можем написать так:
let jasper = {...this.state.jasper};
2 - с помощью распространение оператор:
this.setState(prevState => ({
    jasper: {
        ...prevState.jasper,
        name: 'something'
    }
}))

mannok · Accepted Answer · 2018-04-17 05:47:28

быстрый и самый читаемый как:
this.setState({...this.state.jasper, name: 'someothername'});
хотя this.state.jasper уже содержат свойство name, latter name: 'someothername' С быть использован.

mccambridge · Accepted Answer · 2017-04-26 19:06:05

первый случай действительно является синтаксической ошибкой.
this.state = {
  name: 'jasper',
  age: 28
}
таким образом, если вы хотите изменить имя, вы можете просто звоните:
this.setState({
  name: 'Sean'
});
будет ли это достичь того, к чему вы стремитесь?

для больших, более сложных хранилищ данных, я бы использовал что-то вроде "возвращение". Но это гораздо более продвинутый.

общее правило с состоянием компонента-использовать его только для управления состоянием пользовательского интерфейса компонента (например, active, timers и т. д.)

проверьте эти ссылки:

https://facebook.github.io/react/docs/react-component.html#state

https://facebook.github.io/react/docs/state-and-lifecycle.html

Alberto Piras · Accepted Answer · 2018-03-06 12:29:07

я использовал это решение.

Если у вас есть вложенный такой:
   this.state = {
          formInputs:{
            friendName:{
              value:'',
              isValid:false,
              errorMsg:''
            },
            friendEmail:{
              value:'',
              isValid:false,
              errorMsg:''
            }
}
вы можете объявить функцию handleChange, которая копирует текущий статус и повторно назначает его с измененными значениями
handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let statusCopy = Object.assign({}, this.state);
    statusCopy.formInputs[inputName].value = inputValue;

    this.setState(statusCopy);
  }
здесь html с прослушивателем событий. Обязательно используйте то же имя, что и в объекте состояния (в данном случае'friendName')
<input type="text" onChange={this.handleChange} " name="friendName" />

Nikhil · Accepted Answer · 2018-10-05 06:15:07

Используйте оператор spread и некоторые ES6 здесь
this.setState({
    jasper: {
          ...this.state.jasper,
          name: 'something'
    }
})

Marc LaQuay · Accepted Answer · 2018-08-13 12:17:27

также, следуя решению Альберто Пираса, если вы не хотите копировать весь объект "состояние":
handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let jasperCopy = Object.assign({}, this.state.jasper);
    jasperCopy[inputName].name = inputValue;

    this.setState({jasper: jasperCopy});
  }

Luis Martins · Accepted Answer · 2018-06-15 13:54:56

другой вариант: определите свою переменную из яшма объект, а затем просто назвать переменную.

оператор распространения: ES6
this.state = {  jasper: { name: 'jasper', age: 28 } } 

let foo = "something that needs to be saved into state" 

this.setState(prevState => ({
    jasper: {
        ...jasper.entity,
        foo
    }
})