Question

我是React的初学者，在参加了几堂在线课程后，我开始构建自己的第一个真实表单。

我有一个表格，用于记录工作单位目标和实现这些目标的每日“分数”。表格工作正常，数据已正确到达我的数据库中。在表格底部，我想显示今天的跑步总成绩。

我可以插入应该显示分数的组件，但是我只是不太想知道如何用实际的分数值填充该分数组件。我尝试了许多不同的方法来更新state.data中的“ totalToday”值，以便该值可以作为道具使用。到目前为止，没有任何效果。

这是我的表单文件（已删除了许多不相关的其他代码）。您可以在表单的底部看到“ TotalToday”组件，并试图将其“ totalToday”值发送给它。

import React from "react";
import Form from "./common/form";
…
import TotalToday from "./totalToday";

class FormProject extends Form {
  state = {
    data: {
      inpDate: "",
      selTeam: "",
      selGoal: "",
      selProject: "",
      inpScore: "",
      totalToday: ""
    },
    teams: [],
    goals: [],
    projects: []
  };

  async componentDidMount() {
    await this.populateTeams();
    await this.populateGoals();
    await this.populateProjects();
  }


  doSubmit = async () => {
    await saveScore(this.state.data); 
    this.setState({
      data: {
        inpDate: "",
        selTeam: "",
        selGoal: "",
        selProject: "",
        inpScore: "",
        totalToday: ""
      }
    });
  };

  render() {
    return (
      <div>
        <h1>Team Scorecard</h1>
        <form onSubmit={this.handleSubmit}>
          …
          {this.renderButton("Save")}
        </form>
        <TotalToday totalToday={this.state.data.totalToday} />
      </div>
    );
  }
}

export default FormProject;

这是我的“ TotalToday”组件文件–

import React from "react";

const TotalToday = ({ totalToday }) => {
  return (
    <div className="alert alert-primary mt-2" role="alert">
      Total Time Today: {totalToday}
    </div>
  );
};

export default TotalToday;

最后，这是我的“ reportService.js”文件，可从Express / Node后端获取运行总计。请注意，我的GET请求在Postman中可以正常工作，返回今天的总数，所以我知道后端设置至少可以正常工作-

import http from "./httpService";
import { apiUrl } from "../config.json";


export function getTotalToday() {
  return http.get(apiUrl + "/report");
}

这是我从GET请求中获取的数据的布局–

[
    {
        "scoreTotalToday": 85
    }
]

就像我在顶部说的那样，我尝试了各种不同的方式来更新表单文件中的state.data.totalToday数据点，但还无法使其正常工作。我在这里想念什么？

在此先感谢您的帮助！

乔尔

Answer 1

我认为您的第一步是使用axios。

我会这样写，并在componentDidMount生命周期方法上进行。

componentDidMount() {
 axios.get(apiUrl + "/reports")
  .then(res => {
    const totalToday = res.data;
    this.setState({ totalToday });
  })
}

我还将状态对象更改为

state = {
 key : "someString",
 key : [someArray]
}

我也将删除状态对象中的data :，在查找所需数据时它又增加了一个步骤。没有API进行测试，就无法确认是否可以解决所有问题，但这应该可以使您走上正确的道路。我认为缺少axios是需要的主要解决方法。

Answer 2

在上述乔什的关键协助下，我得以解决自己的问题，现在今天的总成绩显示在我的表格下方！

这是我所做的更改。

首先，我真的不得不处理一个事实，即使数组只能有一个元素，我也要返回数组。我来自数据库背景，因此我只想拥有一个“单元”数据，这就是总数本身。但这只是一个键值对数组，即使它只是一个单元素数组。

因此，我更改了状态对象的形式，将“ totalToday”从“数据”部分移到了数组部分，在其中输入了选择框的值：

state = {
    data: {
      inpDate: "",
      selTeam: "",
      selGoal: "",
      selProject: "",
      inpScore: ""
    },
    teams: [],
    goals: [],
    projects: [],
    totalToday: []
  };

然后，我将以前不确定是否需要的辅助函数添加回表单文件中-

  async updateTotalToday() {
    const { data: totalToday } = await getTotalToday();
    this.setState({ totalToday });
  }

然后我将其添加到“ doSubmit”函数（以及我的componentDidMount生命周期挂钩）中，以便每次提交新记录时该总数都会更新（请注意，再次从“数据”中删除“ totalToday” ”状态更新部分）–

doSubmit = async () => {
    await saveScore(this.state.data); 
    this.setState({
      data: {
        inpDate: "",
        selTeam: "",
        selGoal: "",
        selProject: "",
        inpScore: ""
      }
    });
    await this.updateTotalToday();
  };

然后，在表单的底部，我只是将整个数组对象作为prop发送给组件文件（因此，我从以前的方法中删除了“ data”一词）–

      {this.renderButton("Save")}
    </form>
    <TotalToday totalToday={this.state.totalToday} />
  </div>

最后，我在“ TotalToday”组件文件中添加了数组映射。最终，这是整个解决方案中最重要的部分–

import React from "react";

const TotalToday = ({ totalToday }) => {
  return (
    <div className="alert alert-primary mt-2" role="alert">
      {totalToday.map((score, index) => (
        <p key={index}>Total today: {score.scoreTotalToday}</p>
      ))}
    </div>
  );
};

export default TotalToday;

再次感谢Josh的帮助。我希望我通过这种解决方案所做的努力可以帮助其他人！

乔尔

React-使用来自HTTP端点的数据填充组件prop

2 个答案: