无法从商店获取更新状态

Question

#this 是我想对道具执行 Dispacth() 操作的地方我相信我正确连接了组件。第一个参数将 state 映射到 props，第二个参数映射到 dispatch。这样当我分派操作然后记录 getState 时，我可以看到商店已更新。import React from "react";import { Modal, Button } from "react-bootstrap";import { connect } from "react-redux"function AddCart(props) {  console.log("AddCart Props", props);  function handleClick(e) {    e.preventDefault();    props.addtocard()    // props.addtocard((props.count * props.price))  }  return <Modal    {...props}    size="md"    aria-labelledby="contained-modal-title-vcenter"    centered  >    <Modal.Header closeButton    >      <Modal.Title id="contained-modal-title-vcenter">        Successful!          </Modal.Title>    </Modal.Header>    <Modal.Body>      <p>        <b>count:{props.count} size:{props.size}  x   title:{props.title} price:{(props.count * props.price).toFixed(2)}</b> added to your cart!          </p>    </Modal.Body>    <Modal.Footer >      <Button className="edit-btn" onClick={props.onHide}>Close</Button>      <Button className="edit-btn" href="/cart" onClick={handleClick}>Go to Cart</Button>    </Modal.Footer>  </Modal>}function mapDispatchToProps(dispatch, props) {  return {    addtocard: () => dispatch({ type: "ADD_ITEM", price: (props.count * props.price) })  }}export default connect(null, mapDispatchToProps)(AddCart);

Answer 1

在组件重新渲染之前，React 道具不会更新。如果你触发任何状态更新，React 或 Redux，你无法看到新的道具值，直到你的点击处理程序完成后的某个时间。

所以，这永远不会像你希望的那样工作：

const onClick = () => {

  console.log(props.value); // original value

  props.updateSomeValue();

  console.log(props.value); // ERROR: This will _still_ be the original value!

}

如果您正在分派 Redux 操作并需要立即访问更新后的状态以运行更多逻辑，您应该将该代码切换为在 Redux“thunk”函数中执行，该函数可以访问getState()并可以尽快读取更新后的状态之前的调度完成。