Update Redux nach Änderung des Komponentenstatus

Question

Immer noch lernen, Redux richtig zu verwenden. Ich war eine Stunde hier und brauche Hilfe. Ich möchte den Status einer Stateful-Komponente über seine untergeordnete Funktionskomponente aktualisieren. Danach möchte ich eine Klassenmethode aktivieren, die eine Redux-Aktion verwendet, um den Speicher zu aktualisieren. Ich habe versucht, diese beiden Dinge in der richtigen Reihenfolge auftreten zu lassen, aber die Zustandsänderung ist erst möglich, wenn die Methode, die sie ausführt, aufgelöst wird.

Wie kann ich eine Reduktive Aktion auslösen, die aktiviert wird, sobald der lokale Klassenstatus aktualisiert wurde?

Mein Hauptproblem ist, dass der Zustand updates AFTER handleMiniChange auftritt, so dass das vollständige Datum im Speicher immer ein Ereignis in der Geschichte zurück ist (dh ich muss zweimal mit den Dropdowns interagieren, damit Redux das registriert erste Aktion, und dann ist es immer einen Schritt zurück).

Ich versuchte this.forUpdate und this.componentWillUpdate aber ich lief in Endlosschleifen. (Es vielleicht falsch ich tat ...?)

Beachten Sie, dass „update_field“ Aktion der Redux ist, kümmert sich um die Aktualisierung dauert das Geschäft.

mein Code:

function MiniDropDown (props) { 
    return (
     <select name={props.name} value={props.value} onChange={props.handleMiniChange}> 
     { 
      props.list.map((obj) => { 
      return <option key={obj.Value} value={obj.Value}>{obj.Value}</option> 
      }) 
     } 
     </select> 
    ) 
} 

/************************************************* 
*    MAIN COMPONENT 
*************************************************/ 

export default class DateMenu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     month:'MM', 
     day:'DD', 
     year:'YYYY', 
    } 
    this.handleDateChange = this.handleDateChange.bind(this) 
    this.handleMiniChange = this.handleMiniChange.bind(this) 
    } 

    handleMiniChange(event) { 
    const name = event.target.name; 
    const value = event.target.value; 
    this.setState({ [name]: value}); 
    this.handleDateChange() 
    } 

    handleDateChange() { 
    const _date = `${this.state.month}/${this.state.day}/${this.state.year}`; 
    this.props.common_props.update_field(this.props.name, _date); 
    } 


    render() { 

    const common_props= { 
     form: this.props.common_props.form_data, 
     handleMiniChange: this.handleMiniChange, 
    } 

    return (
     <div className='traveler_data_row'> 
     <label> {this.props.specs.label} </label> 

     <MiniDropDown value={this.state.month} 
         name='month' 
         list={getMonths()} 
         {...common_props} /> 

     <MiniDropDown value={this.state.day} 
         name='day' 
         list={getDays()} 
         {...common_props} /> 

     <MiniDropDown value={this.state.year} 
         name='year' 
         list={getYears()} 
         {...common_props} /> 
     </div> 
    ) 
    } 
} 

Answer 1

Das Problem hierbei ist, dass setState ein asynchroner Betrieb ist.
Das bedeutet, dass Sie nach dem Aufruf setState nicht sicher sein können, wann genau der Status wirklich aktualisiert wird und wann Sie den neuen Status in anderen Handlern verwenden können.
Eine Lösung besteht darin, die setStatecallback function zu verwenden und den zweiten Handler im Callback aufzurufen.

this.setState({ params }, this.secondHandler)