Лучший способ обновить/изменить объект состояния в ответном нативном?

Question

Каков наилучший способ обновить вложенное свойство внутри объекта 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 
} 

Но этот метод не звучит, лучший способ для производительности/памяти

Answer 1

Лучший способ, и путь предложил facebook, заключается в использовании this.setState({someProp: "your new prop"}).

Использование этого метода является единственным способом гарантировать правильность отображения компонента.

Эта функция является инкрементальной, поэтому вам не нужно устанавливать все состояние, просто необходимую вам опору.

Я настоятельно рекомендую вам ознакомиться с документами here.

Answer 2

// 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 } 
}) 
}