コンポーネント状態の変更後にReduxを更新してください

Question

まだReduxを正しく使用することを学んでいます。私はこれを1時間行っており、助けが必要です。 ステートフルコンポーネントの子機能コンポーネントを通じてステートフルコンポーネントの状態を更新したいと考えています。その後、Reduxアクションを使用してストアを更新するクラスメソッドをアクティブにしたいとします。私はこれらの2つのことが順番に起こるようにしようとしていましたが、それを解決する方法がなくなるまで状態の変化にアクセスすることはできません。

ローカルクラスの状態が更新されたら、reduxアクションをアクティブにするにはどうすればよいですか？

私の主な問題は、状態の更新がhandleMiniChange後に発生することです。つまり、Store内の完全な日付は常に履歴内の1つのイベントです（つまり、Reduxが登録するためにドロップダウンと2回対話する必要があります。最初のアクション、そしてそれは常に一歩遅れです）。

私はthis.forUpdateとthis.componentWillUpdateを試してみましたが、私は無限ループに走った。（たぶん私は間違ったことをしていた...？）

注「update_fieldは、」更新の世話をするReduxのアクションであること店舗。

私のコード：

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

ここでの問題は、setStateは非同期操作であるということです。
つまり、setStateを呼び出した後は、正確に状態が本当に更新されたかどうか、および他のハンドラで新しい状態を使用できるかどうかはわかりません。
解決策の1つは、setStatecallback functionを使用し、コールバックで2番目のハンドラを呼び出すことです。

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