React：想要创建一个数组，该数组根据 this.state.data.map() 函数生成的值自动更新

Question

我正在开发一个应用程序，该应用程序使用 this.state.data.map() 自动生成一个 table，其中包含使用添加组件输入的输入。生成的输入根据在应用程序中选择的选项卡而变化。我想找到在任何时间点生成的每个输入的数量值的总和。任何帮助将不胜感激:)

render() {
    return (
      <div>
        <a href="/login">
          <button>Log Out</button>
        </a>
        <Tabs activeKey={this.state.activeTab} onSelect={this.handleSelect}>
          <Tab eventKey={2018} title={<YearTabsRouter year="2018" />}>
            <MonthTabs
              year="2018"
              monthlyActiveTab={this.state.selectedMonth}
            />
          </Tab>
          <Tab eventKey={2019} title={<YearTabsRouter year="2019" />}>
            <MonthTabs
              year="2019"
              monthlyActiveTab={this.state.selectedMonth}
            />
          </Tab>
          <Tab eventKey={2020} title={<YearTabsRouter year="2020" />}>
            <MonthTabs
              year="2020"
              monthlyActiveTab={this.state.selectedMonth}
            />
          </Tab>
          <Tab eventKey={2021} title={<YearTabsRouter year="2021" />}>
            <MonthTabs
              year="2021"
              monthlyActiveTab={this.state.selectedMonth}
            />
          </Tab>
          <Tab eventKey={2022} title={<YearTabsRouter year="2022" />}>
            <MonthTabs
              year="2022"
              monthlyActiveTab={this.state.selectedMonth}
            />
          </Tab>
        </Tabs>
        <Add
          selectedMonth={this.state.selectedMonth}
          selectedYear={this.state.selectedYear}
        />
        <table>
          <thead>
            <tr>
              <th />
              <th className="desc-col">Description</th>
              <th className="button-col">Amount</th>
              <th className="button-col">Month</th>
              <th className="button-col">Year</th>
              <th className="button-col">Update</th>
              <th className="button-col">Delete</th>
            </tr>
          </thead>
          <tbody>
            {this.state.data.map(exp => {
              return (
                <tr>
                  <td className="counterCell" />
                  <td className="desc-col">{exp.description}</td>
                  <td className="button-col" id="amt" refs={this.amount}>
                    {exp.amount}
                  </td>
                  <td className="button-col">{exp.month}</td>
                  <td className="button-col">{exp.year}</td>
                  <td className="button-col">
                    <Update expense={exp} />
                  </td>
                  <td className="button-col">
                    <Delete expense={exp} />
                  </td>
                </tr>
              );
            })}
            <th>
              Total: <span id="demo">{getTotal()}</span>
            </th>
          </tbody>
        </table>
      </div>
    );
  }

Answer 1

在return之前在render中做.map计算总值并赋值给render中的局部变量like

 render(){
       const { data } = this.state;
       let totalPrice = 0;
       const items =  data && data.map(exp => {
         totalPrice += exp.amount;
          return (
            <tr>
              <td className="counterCell" />
              <td className="desc-col">{exp.description}</td>
              <td className="button-col" id="amt" refs={this.amount}>
                {exp.amount}
              </td>
              <td className="button-col">{exp.month}</td>
              <td className="button-col">{exp.year}</td>
              <td className="button-col">
                <Update expense={exp} />
              </td>
              <td className="button-col">
                <Delete expense={exp} />
              </td>
            </tr>
          )
        })
       return(
            <div>
                  <table>
      <thead>
        <tr>
          <th />
          <th className="desc-col">Description</th>
          <th className="button-col">Amount</th>
          <th className="button-col">Month</th>
          <th className="button-col">Year</th>
          <th className="button-col">Update</th>
          <th className="button-col">Delete</th>
        </tr>
      </thead>
      <tbody>
          {items}
        <tr>
        <th>
          Total: <span id="demo">{totalPrice}</span>
        </th>
       </tr>
      </tbody>
    </table>
           </div>
       )
  }

React：想要创建一个数组，该数组根据 this.state.data.map() 函数生成的值自动更新

React: Wanting to create an array that auto updates based on the values being generated by a this.state.data.map() function

jsx

reactjs

mern