无法从商店获取更新状态

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 = () => {&nbsp; console.log(props.value); // original value&nbsp; props.updateSomeValue();&nbsp; console.log(props.value); // ERROR: This will _still_ be the original value!}如果您正在分派 Redux 操作并需要立即访问更新后的状态以运行更多逻辑，您应该将该代码切换为在 Redux“thunk”函数中执行，该函数可以访问getState()并可以尽快读取更新后的状态之前的调度完成。