如何操作位于 state 中的数据并显示到页面？

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 调用移动到它们各自的组件中

您还可以将数据操作移动到一个单独的方法中，并在渲染方法中调用它。 您可以根据需要编写任意数量的这些，它们都可以从同一个状态变量中读取

债务摘要示例：

import React from "react";

class DebtSummary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      debtItems: []
    }
  }

  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));
  };

  // Do some data manipulation, in the case computing the debt sum
  sumOfDebtItems = () => {
    return this.state.debtItems.reduce((a, c) => {
        return a + c["balance"];
    }, 0);
  }

  // Load the debt data once the component has mounted
  componentDidMount() {
    this.getDebtData()
  }

  render() {
    return (
      <div>
       <p>Debt Summary</p>
       {this.sumOfDebtItems()}
      </div>
    );
  }
};

export default DebtSummary;