如何在 React js 中将 reducer 的 return 值设置为组件中的状态对象

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 值在状态对象中设置。当我运行上面的代码时，我收到错误消息，因为 this.props.agmts.map 不是函数

Answer 1

分派是异步的，因此您需要使用 componentDidUpdate 或直接 return 观察要在 Redux 存储中更新的结果从减速器。

获得结果后，您可以对其进行操作并将其存储在本地状态中以在渲染中引用。请注意，除非你需要在某个地方引用另一个组件中的结果，否则你不需要将它存储在 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 函数中出现错误 "map is not a function" 是因为您在 this.props.Agmts 中获取的数据必须是对象类型。（对象括在大括号 {} 中）。

您只能在数组而不是对象上应用映射函数。（数组括在方括号 [] 中）

如何在 React js 中将 reducer 的 return 值设置为组件中的状态对象

how can I set the reducer's return value to state object in component in react js

reactjs

react-redux

react-props