更新State对象内部的嵌套属性的最佳方法是什么?
// constructor --
this.state.someprop = [{quadrangle: {rectangle: {width: * }}, ...}]
...
我想更新矩形对象的宽度。
this.state.quadrangle.rectangle.width = newvalue // isn't working
我可以让它像以下一样工作:
const {quadrangle} = this.state
quadrangle.rectangle.width = newvalue
this.setState = {
quadrangle: quadrangle
}
但这种方法听起来不是性能/内存的最佳方式
// ES6 WAYS TO UPDATE STATE
// NOTE: you MUST use this.setState() function for updates your state
class Example extends Component {
constructor(props) {
super(props);
this.state = {
name: 'John',
details: {
age: 28,
height: 1.79,
}
}
componentDidMount() {
this.handleChangeName('Snow');
this.handleAgeChange(30);
}
componentDidUpdate() {
console.log(this.state);
/*
returns
{
name: 'Snow',
details: {
age: 30,
height: 1.79,
}
}
*/
}
// this way you keep immutable your previous state (best practice) with de
// param "prevState"
handleChangeName = (_name) => {
this.setState(
(prevState) => ({
name: _name
})
)
}
//this is how you update just one property from an internal object
handleAgeChange = (_age) => {
this.setState(
(prevState) => ({
details: Object.assign({}, prevState.details, {
age: _age
})
})
)
}
// this is the simple way to set state
handleSimpleAgeChange = (_age) => {
this.setState({
details: Object.assign({}, this.state.details, { age: _age })
})
}
render() {
return (
<h1>My name is {this.state.name} and i'm {this.state.details.age} years old</h1>
)
}
}
如果你想保持最佳实践而不加强,你可以做到:
updateState = (obj) => {
if (obj instance of Object) {
this.setState(
(prevState) => (Object.assign({}, prevState, obj))
);
}
}
用法:
//code ... code ... code ...
handleAgeChange = (_age) => {
this.updateState({
details: Object.assign({}, this.state.details, { age: _age }
})
}
最好的方式,以及Facebook提出的方式,是使用this.setState({someProp: "your new prop"})
。
使用它是唯一可以保证组件正确呈现的方法。
这个函数是递增的,所以你不需要设置整个状态,只需要你需要的道具。
我强烈建议你阅读文档qazxsw poi。
如果你的对象是嵌套的,那么使内部对象成为自己的状态,
here
然后使用你的克隆和替换技术:
this.state = {
quadrangle: {this.state.rectangle, ...}
rectangle: {width: * }}
};
国家应该向上传播。如果只需要根据所述矩形更新某些四边形,则应该提高性能。道具失败,陈述。