Обновление объекта с помощью setState в React
возможно ли вообще обновить свойства объекта с помощью setState?
что-то типа:
this.state = {
jasper: { name: 'jasper', age: 28 },
}
Я пробовал:
this.setState({jasper.name : 'someOtherName'});
и так:
this.setState({jasper:{name:'someothername'}})
первая-это синтаксическая ошибка, а второй просто ничего не делает. Есть идеи?
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'
}
}))
самый быстрый и наиболее читаемый способ:
this.setState({...this.state.jasper, name: 'someothername'});
хотя this.state.jasper
уже содержит свойство name, latter name: 'someothername'
С быть использован.
первый случай действительно является синтаксической ошибкой.
поскольку я не вижу остальную часть вашего компонента, трудно понять, почему вы размещаете объекты в своем состоянии здесь. Не рекомендуется размещать объекты в состоянии компонента. Попробуйте установить начальное состояние:
this.state = {
name: 'jasper',
age: 28
}
таким образом, если вы хотите изменить имя, вы можете просто звоните:
this.setState({
name: 'Sean'
});
достигнет ли это того, к чему вы стремитесь?
для больших, более сложных хранилищ данных я бы использовал что-то вроде "возвращение". Но это гораздо более продвинутый.
общее правило с состоянием компонента-использовать его только для управления состоянием пользовательского интерфейса компонента(например, active, timers и т. д.)
проверьте эти ссылки:
я использовал это решение.
Если у вас есть вложенный такой:
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" />
Используйте оператор распространения и некоторые ES6 здесь
this.setState({
jasper: {
...this.state.jasper,
name: 'something'
}
})
кроме того, следуя решению Альберто Пираса, если вы не хотите копировать весь объект "состояние":
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});
}
другой вариант: определите свою переменную из яшма 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
}
})