Question

我正在进行三个单独的axios调用，每个调用都使用一些数据设置状态。在哪里可以对状态数据进行数据处理，而不是更改状态而是在其他地方显示其他内容？

例如，在transactionItems状态之外，我想获取当前日期的所有交易。所有交易项目添加到数据库后，都会自动设置日期。

我在解析数据时遇到问题，因为我的setstate似乎在所有axios调用中都更新了3次。

我也想做其他的数据操作，但我觉得我会遇到另一个障碍。

import React, { Component } from "react";
import axios from "axios";
import moment from "moment";
import TransactionSummary from "./TransactionSummary";
import BudgetSummary from "./BudgetSummary";
import DebtSummary from "./DebtSummary";

class DashboardTable extends Component {
  constructor(props) {
    super(props);

    this.state = {
      transactionItems: [],
      budgetItems: [],
      debtItems: [],
      spentToday: ""
    };
  }

  componentDidMount() {
    this.getTransactionData();
    this.getBudgetData();
    this.getDebtData();
  }

  getTransactionData = () => {
    axios.defaults.headers.common["Authorization"] = localStorage.getItem(
      "jwtToken"
    );
    axios
      .get("/api/transactions")
      .then(res =>
        this.setState({
          transactionItems: res.data
        })
      )
      .catch(err => console.log(err));
  };

  getBudgetData = () => {
    axios.defaults.headers.common["Authorization"] = localStorage.getItem(
      "jwtToken"
    );
    axios
      .get("/api/budgets")
      .then(res =>
        this.setState({
          budgetItems: res.data
        })
      )
      .catch(err => console.log(err));
  };

  getDebtData = () => {
    axios.defaults.headers.common["Authorization"] = localStorage.getItem(
      "jwtToken"
    );
    axios
      .get("/api/debts")
      .then(res =>
        this.setState({
          debtItems: res.data
        })
      )
      .catch(err => console.log(err));
  };

  render() {
    return (
      <div>
        <div className="content">
          <TransactionSummary transactionItems={this.state.transactionItems} />

          <BudgetSummary budgetItems={this.state.budgetItems} />

          <DebtSummary debtItems={this.state.debtItems} />
        </div>
      </div>
    );
  }
}

export default DashboardTable;

这是DebtSummary组件

import React from "react";

const DebtSummary = props => {
  let sumOfDebtItems = props.debtItems.reduce((a, c) => {
    return a + c["balance"];
  }, 0);
  return (
    <div>
      <p>Debt Summary</p>

      {sumOfDebtItems}
    </div>
  );
};

export default DebtSummary;

Answer 1

像Hemadri说的那样，最简单的方法是将3个axios调用移至其各自的组件中

您还可以将数据处理移动到单独的方法中，然后在render方法中调用它。您可以根据需要编写任意数量的代码，它们都可以从同一状态变量中读取

债务摘要示例：

NewItemTableViewController

如何处理处于状态并显示到页面的数据？

1 个答案: