如何在 react js 的组件中将减速器的返回值设置为 state object

Question

我有一个组件如下。 我正在调用 api 的 componentDidMount() 事件。 我不明白为什么我在组件渲染时第一次没有得到它的道具值。 另外我不确定为什么组件会渲染 2 次。 我有以下代码。

 import React, { Component } from "react"; import { connect } from "react-redux"; import { Link } from "react-router-dom"; import AgmtTable from "./AgmtTable"; import * as AgmtAction from "../redux/actions/AgmtAction"; class AgmtContainer extends Component { constructor(props) { super(props); this.state = {}; } fetch Agmt details. componentDidMount() { this.props.dispatch( AgmtAction.getAgmtsForCustomer( this.props.match.params.custID, this.props.match.params.source, this.props.token ) ); console.log("componentDidMount", this.props.Agmts); } getHeaader = () => { var tableHeadings = [ "Agmt ID", "Start Date", "End Date", ]; return tableHeadings.map((key) => { return <th key={key}> {key.toUpperCase()}</th>; }); }; getRowsData = () => { console.log("in row data", this.props.Agmts);//here I cant see a data though its present in mapStateToProps() function. I am getting error as this.props.agreements.map is not a function. if (this.props.Agmts) { return this.props.Agmts.map((value) => { const { Agmt_ID, Agmt_START_DATE, End_DATE, } = value; return ( <tr key={Agmt_ID} className="clickable-row active"> <td> {Agmt_ID} </td> <td> {Agmt_START_DATE} </td> <td> {End_DATE} </td> </tr> ); }); } }; render() { return ( <React.Fragment> <div> <table id="display-table" className="table table-bordered table-hover table-responsive table-condensed table-striped table-sm" > <tbody> <tr>{this.getHeaader()}</tr> {this.getRowsData()} </tbody> </table> </div> </React.Fragment> ); } } function mapStateToProps(state) { return { Agmts: state.AgmtsDetails.AgmtsData,//here I have a data token: state.login.userDetails.token, }; } export default connect(mapStateToProps)(AgmtContainer);

另外，如何使用 mapStateToProps 值在 state object 中设置。 当我在上面运行代码时出现错误，因为 this.props.agmts.map is not a function

Answer 1

调度是异步的，因此您要么需要在 Redux 存储中使用componentDidUpdate观察要更新的结果，要么直接从减速器返回结果。

获得结果后，您可以对其进行操作并将其存储在本地 state 以在渲染中引用。 请注意，除非您需要在某个地方引用另一个组件中的结果，否则您不需要将其存储在 Redux 中，您可以在组件中处理它。

使用componentDidUpdate订阅商店：

componentDidMount() {
  this.props.dispatch(
    AgmtAction.getAgmtsForCustomer(
      this.props.match.params.custID,
      this.props.match.params.source,
      this.props.token
    )
  );
}

componentDidUpdate(prevProps) {
  if (JSON.stringify(prevProps.Agmts) !== JSON.stringify(this.props.Agmts)) {
    // this is the result of the dispatch
    console.log(this.props.Agmts);
  }
}

直接返回结果：

// in your AgmtAction.getAgmtsForCustomer action
export const getAgmtsForCustomer = () => (dispatch, getState) => {
  return axios
    .get(..........
    .then((res) => {
      dispatch(..........
        return res.data;
      })
    .catch((err) => {
      ...
    });
};

// in your `AgmtContainer` component
...
componentDidMount() {
  this.props.dispatch(
    AgmtAction.getAgmtsForCustomer(
      this.props.match.params.custID,
      this.props.match.params.source,
      this.props.token
    )
  ).then((res) => {
    // this is the result of the dispatch
    console.log(res);
  });
}

Answer 2

在 getRowsData function 中，您收到错误“地图不是函数”是由于您在 this.props.Agmts 中获得的数据必须是 object 类型。 （对象括在大括号 {} 中）。

您只能在阵列上应用 map function 而不是在 object 上。 （数组括在方括号 [] 中）