在本地更新/更改状态对象的最佳方法是什么?

问题描述 投票:2回答:3

更新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
}

但这种方法听起来不是性能/内存的最佳方式

javascript reactjs react-native
3个回答
5
投票
// 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 }
 })
}

4
投票

最好的方式,以及Facebook提出的方式,是使用this.setState({someProp: "your new prop"})

使用它是唯一可以保证组件正确呈现的方法。

这个函数是递增的,所以你不需要设置整个状态,只需要你需要的道具。

我强烈建议你阅读文档qazxsw poi。


0
投票

如果你的对象是嵌套的,那么使内部对象成为自己的状态,

here

然后使用你的克隆和替换技术:

this.state = {
  quadrangle: {this.state.rectangle, ...}
  rectangle: {width: * }}
};

国家应该向上传播。如果只需要根据所述矩形更新某些四边形,则应该提高性能。道具失败,陈述。

© www.soinside.com 2019 - 2024. All rights reserved.