Question

这可能是

的副本

How to access redux-store from within react's componentDIdMount()

我发现该示例比我的实现更加混乱和复杂，因此我冒着用更简单的代码再次询问的风险。

我需要从not_访问我的redux存储。以下代码呈现了componentDidMount()组件，但<h3>是一个console.log()值：

null

减速器代码：

class FinishedPaying extends Component {

  componentDidMount() {
    console.log(this.props.paymentID);
  }
  render() {
    return (
      <div>
        <h3>{this.props.paymentID}</h3>
      </div>
    );
  }
}

const mapStateToProps = (state, props) => {
  return {
    paymentID: state.paymentID
  };
};

const mapActionsToProps = (dispatch, props) => {
  return bindActionCreators(
    {
      updatePaymentID: updatePaymentID
    },
    dispatch
  );
};

export default connect(
  mapStateToProps,
  mapActionsToProps
)(FinishedPaying);

动作代码：

import { UPDATE_PAYMENTID } from "../actions/paymentID-actions";

export default function paymentIDReducer(state = "", { type, payload }) {
  switch (type) {
    case UPDATE_PAYMENTID:
      return payload.paymentID;
    default:
      return state;
  }
}

Answer 1

当componentDidMount显示一个值（通过console.log）并且正在渲染一个不同的值时，一种可能的解释是，该组件在安装后立即被重新渲染（例如，初始渲染为空值）然后在设置该值的初始呈现后立即调度redux操作）。通过执行console.log方法中的render，可以轻松查看是否是这种情况。我希望您会从render方法中看到两个日志-一个与componentDidMount同步，然后另一个具有您看到的呈现值。

为了在componentDidMount中具有适当的值，您将需要更改事件的顺序，以便在状态更新后或在{{1 }}利用其他/其他生命周期方法来识别值何时更改并进行适当处理。

如何从componentDidMount（）访问商店？

1 个答案: