Reactjs MapStateTops值因击键而滞后于getState（）

我正在App.js上使用redux的connect（），然后将一个调度器传递给一个孩子。子对象还接收状态变量作为道具

问题是状态变量上的log语句通过prop映射滞后于输入值1位。下面是两条日志语句，说明了这一点：

SelectDonation.js:19 getState value {donation_amount: "345"}
SelectDonation.js:20 mapstatetoprops value 34

下面是子组件select捐赠.js：

handleInputChange = inputEvent => {
    this.props.dispatch_set_donation_amount(inputEvent.target.value);
    console.log("getState value", store.getState());
    console.log("mapstatetoprops value", this.props.donation_amount)
  };

  render() {
    return (
      <React.Fragment>
          <Form>
              <input
                type='number'
                placeholder='Custom Amount'
                name='donation_amount'
                id='custom_amount'
                onChange={(e) => this.handleInputChange(e)}
              />

              <Button
                primary
                onClick={(event) => {
                  event.preventDefault();
                  this.props.dispatchChangeCheckoutStep(checkoutSteps.paymentDetails);
                  console.log(store.getState().checkoutStep)
                }}>Next Step
              </Button>

          </Form>
      </React.Fragment>
    )
  }
}

handleInputChange=inputEvent=>{
this.props.dispatch\u set\u generation\u amount（inputEvent.target.value）；
log（“getState值”，store.getState（））；
console.log（“mapstatetoprops值”，this.props.捐赠金额）
};
render（）{
返回(
this.handleInputChange（e）}
/>
{
event.preventDefault（）；
this.props.dispatchChangeCheckoutStep（CheckOutstep.paymentDetails）；
console.log（store.getState（）.checkoutStep）
}}>下一步
)
}
}

App.js：

class App extends Component {     
  render() {
    return (
      <div className="App">
        <header className="App-header">

          <Modal
            trigger={<Button color='purple'>Donate</Button>}
            size='small'
          >

          {this.props.checkoutStep === checkoutSteps.selectDonation &&
           <SelectDonation
            dispatch_set_donation_amount = {this.props.dispatch_set_donation_amount}
            dispatchChangeCheckoutStep={this.props.dispatchChangeCheckoutStep}
             {...this.props} // passes down all the state
           />
          }
          {this.props.checkoutStep === checkoutSteps.paymentDetails &&           <PaymentDetails
            redux_donation_amount={this.props.redux_donation_amount}
            {...this.props}
          />
          }
          {this.props.checkoutStep === checkoutSteps.referrals && <Referrals dispatchUpdateStateData={this.props.dispatchUpdateStateData} />}             
          </Modal>
        </header>
      </div>
    );
  }
}


const map_state_to_props = (state) => {
  return {
    log_prop : state.log_to_console,
    donation_amount : state.donation_amount,
    checkoutStep : state.checkoutStep,
  }
};

const map_dispatch_to_props = (dispatch, own_props) => {
  return {
    dispatch_set_donation_amount : amount => dispatch(set_donation_amount(amount)),
    dispatchChangeCheckoutStep : newStep => dispatch(changeCheckoutStep(newStep)),
    dispatchUpdateStateData : (stateData, stateVariable) => (dispatch(updateStateData(stateData, stateVariable)))
  }
};


//connecting redux
export const AppWrapped = connect(map_state_to_props, map_dispatch_to_props)(App);

类应用程序扩展组件{
render（）{
返回(
{this.props.checkoutStep===checkoutStep.select捐赠&&
}
{this.props.checkoutStep===checkoutStep.paymentDetails&&
}
{this.props.checkoutStep==checkoutStep.refererals&&}
);
}
}
const map_state_to_props=（state）=>{
返回{
log_prop:state.log_到控制台，
捐赠金额：state.捐赠金额，
checkoutStep:state.checkoutStep，
}
};
const map_dispatch_to_props=（dispatch，own_props）=>{
返回{
派遣\设置\捐赠\金额：金额=>派遣（设置\捐赠\金额（金额）），
dispatchChangeCheckoutStep:newStep=>dispatch（changeCheckoutStep（newStep）），
dispatch updateStateData:（stateData，stateVariable）=>（dispatch（updateStateData（stateData，stateVariable）））
}
};
//连接冗余
export const AppWrapped=connect（将状态映射到道具，将调度映射到道具）（应用程序）；

---

在我看来这是正确的，但很明显我忽略了一些事情。是什么导致MapStateTops变量持续落后一次按键？

因为React没有机会更新组件。您自己的代码仍在执行，因此组件生命周期的其余部分尚未执行，因此您的组件仍有其现有的支柱

---

也。因为React没有机会更新该组件，所以出现了一个。

。您自己的代码仍在执行，因此组件生命周期的其余部分尚未执行，因此您的组件仍有其现有的支柱

---

也。其中一个。

该组件尚未更新。您已经调用了一个要发送到减速器的操作，但没有等待组件接收新的道具。您可以通过将第二个日志推入

setTimeout

（不推荐）来查看这一点

或者使用诸如

thunk

之类的中间件，并从动作创建者处返回承诺

this.props.dispatch_set_donation_amount(inputEvent.target.value).then(x => console.log("mapstatetoprops value", x));
console.log("getState value", store.getState());

---

组件尚未更新。您已经调用了一个要发送到减速器的操作，但没有等待组件接收新的道具。您可以通过将第二个日志推入

setTimeout

（不推荐）来查看这一点

或者使用诸如

thunk

之类的中间件，并从动作创建者处返回承诺

this.props.dispatch_set_donation_amount(inputEvent.target.value).then(x => console.log("mapstatetoprops value", x));
console.log("getState value", store.getState());

---

在你的App.js中，我看不到你所指的子组件，也没有任何其他组件将捐赠金额作为道具。不清楚您是如何获得

捐赠金额的

子组件在那里，它就是所谓的子组件。它从…接收道具。。。传送所有道具的操作员。我将更新帖子以澄清这一点。我在你的App.js中没有看到你所指的子组件，也没有任何其他作为道具获得

捐赠金额的组件。不清楚您是如何获得
捐赠金额的
子组件在那里，它就是所谓的子组件。它从…接收道具。。。传送所有道具的操作员。我会更新帖子来澄清这一点。