reactjs, wie man Zustand aktualisiert

Question

constructor(){ 
    super(); 
    this.state = { 
     address: { 
      street:null, 
      city:null, 
      postalCode: null 
     } 
    }; 
} 
postalCodeChange(e){ 
    this.setState.address.postalCode = e.target.value; 
    console.log(this.state); 
} 

Ich versuche, den Staat zu aktualisieren, aber nur den postalCode. Wenn der obige Code ausgeführt wird, erwarte ich, etwas wie das zu bekommen

Object {address: Object { 
      street: null, 
      city: null, 
      postalCode: 'some new value' 
} } 

Aber ich habe Fehler. Was ist los mit dir?

Answer 1

Um Zustand zu bearbeiten Sie setState Methode

const state = merge({}, this.state, { 
    address: { postalCode: e.target.value } 
}); 

this.setState(state); 

Hinweis verwenden müssen - merge es ist nicht real Funktion, um Deep-Merge-Objekte können Sie Pakete verwenden wie merge-deep, assign-deep

oder Sie können update Methode von React.addons verwenden, um diese Methode zu erhalten, führen Sie die folgenden Schritte

1. npm i react-addons-update --save

2. import (oder require) und verwenden Sie es

   import update from 'react-addons-update'; 
   const state = update(this.state, { 
       address: { 
       postalCode: { $set: e.target.value } 
       } 
   });  
   
   this.setState(state); 
   

Example

auch, wenn Sie verwenden ES2015 Sie Object.assign verwenden können, oder spread operator

Object.assign:

const state = Object.assign({}, this.state, { 
    address: Object.assign({}, this.state.address, { postalCode: 1000 }) 
}); 

spread operator

const newState = { 
    address: { ...state.address, postalCode: 1000 } 
}; 

Answer 2

ich sah, dass Sie ES6 verwenden, so dass ich nehme an, Sie auch die stage-2 object spread operator verwenden können.

Mit dieser Funktion können Sie Ihren Status ohne zusätzliches Plug-in oder viel Code aktualisieren.

this.setState({ 
    address: { 
     ...this.state.address, 
     postalCode: e.target.value 
    } 
});