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

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

что-то типа:

this.state = {
   jasper: { name: 'jasper', age: 28 },
}

Я пробовал: 

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

и так:

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

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

72
reactjs state

7 ответов

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

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'
    }
}))
161

самый быстрый и наиболее читаемый способ:

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

хотя this.state.jasper уже содержит свойство name, latter name: 'someothername' С быть использован.

10

первый случай действительно является синтаксической ошибкой.

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

this.state = {
  name: 'jasper',
  age: 28
}

таким образом, если вы хотите изменить имя, вы можете просто звоните:

this.setState({
  name: 'Sean'
});

достигнет ли это того, к чему вы стремитесь?

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

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

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

3

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

Если у вас есть вложенный такой:

   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 с прослушивателем событий. Обязательно используйте то же имя, что и в state object (в данном случае 'friendName')

<input type="text" onChange={this.handleChange} " name="friendName" />
3

Используйте оператор распространения и некоторые ES6 здесь

this.setState({
    jasper: {
          ...this.state.jasper,
          name: 'something'
    }
})
3

кроме того, следуя решению Альберто Пираса, если вы не хотите копировать весь объект "состояние":

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});
  }
0

другой вариант: определите свою переменную из яшма object, а затем просто вызовите переменную.

оператор распространения: 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
    }
})
-2