Javascript 更新API响应上的表内容

我是一个新的反应者，虽然取得了一些令我满意的进步，但我遇到了一个困难，我已经坚持了一天多了

我正在创建一个小应用程序，它在前端使用React，在服务器端使用.NET核心API来提供数据

到目前为止，以下代码仍然有效：

import React, { Component } from 'react';

export class LGSRValidation extends Component {
  displayName = LGSRValidation.name

  constructor(props) {
    super(props);
    this.state = { lgsr: [], loading: true };

    fetch('api/FormValidation/LGSR')
      .then(response => response.json())
      .then(data => {
        this.setState({
          lgsr: data,
          loading: false
        });
      });
  }

  static renderLGSRTable(lgsr) {
    return (
      <table className='table'>
        <thead>
          <tr>
            <th>Job Number</th>
            <th>Job Type</th>
            <th>UPRN</th>
            <th>Gas Register Number</th>
            <th>Service Date</th>
          </tr>
        </thead>
        <tbody>
          <tr key={lgsr.jobnumber}>
            <td>{lgsr.jobNumber}</td>
            <td>{lgsr.jobType}</td>
            <td>{lgsr.uprn}</td>
            <td>{lgsr.gasRegisterNumber}</td>
            <td>{lgsr.serviceDate}</td>
          </tr>
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : LGSRValidation.renderLGSRTable(this.state.lgsr);

    return (
      <div>
        <div>
          <h1>{this.displayName}</h1>
          <p>This component demonstrates fetching data from the server.</p>
          {contents}
        </div>
      </div>
    );
  }
}

看起来很好。我还引入了一个

getData

函数，如下所示：

getData() {
    fetch('api/FormValidation/LGSR')
        .then(response => response.json())
        .then(data => {
            this.setState({
                lgsr: data,
                loading: false
            });
        });

    this.setState({
       contents : this.state.lgsr
    });
}

我怀疑这是我出错的地方

---

请告诉我如何单击我的新按钮来调用API，返回一些数据并将

lgsr

对象的属性传递到相应的表列中；将以前的数据替换为新数据。

您需要将

getData（）

绑定到构造函数，以便可以将

此

用于组件而不是当前函数

this.getData=this.getData.bind（this）

一个更快的方法是使用箭头函数，如下所示

getData=（）=>{….}

这将有望解决您的问题，并允许您使用
此选项。声明
我看到了4种改进代码的方法：

在
componentDidMount
lifecycle方法而不是组件的构造函数（）中加载数据。这不应该与您的问题有关，但更安全的做法是确保在您可能设置状态之前安装了组件

正如SGhaleb提到的，请确保您的
getData
函数已绑定，可以使用箭头函数或绑定选项，否则，
this.getData
是未定义的，按钮的
onClick
应该是否定操作。您可以使用
getData
作为初始请求，以确保类中没有重复的代码

在
getData
中设置状态的
content
属性，但在请求的回调之外进行设置。它的值可以是新请求的新lgsr对象或旧lgsr对象。检查您是否确实需要此项，或将其移动到提取回调

使用专用组件渲染LGSR表，而不是使用静态渲染方法，并通过道具将所需数据传递给LGSR表。再说一遍，与你的问题无关

你想在这里实现什么？
你能粘贴你的最终代码吗

我看到了一些可怕的事情。您的“加载”已在组件状态中声明，并且您正在使用lgsr数据更新“内容”状态。在渲染中，您已将内容声明为this.state.loading

 constructor(props) {
    super(props);
    this.state = { lgsr: [], loading: true };

     /*some code here*/

    getData () {
        fetch('api/FormValidation/LGSR')
            .then(response => response.json())
            .then(data => {
                this.setState({
                    lgsr: data,
                    loading: false 
               });
            });

        this.setState({
           contents : this.state.lgsr
        });
    }

      render() {
        let contents = this.state.loading

试图理解您的需求：您有一个包含一个数据行的表。当用户单击按钮时，您想用新数据行（从api接收的数据）替换当前数据行，还是想向表中添加新行？当您说“不工作”时，发生了什么？@sn42我想用新数据替换旧数据。表中应该只有一行；点击按钮将切换到新数据。@wdm实际上什么也没发生。服务器上的API端点按预期命中，但客户端没有抛出错误，页面也不会更新。就好像我的绑定在呈现的表和从按钮单击接收到的新数据集之间不完全正确一样。这就完成了任务。非常感谢@SGhaleb！谢谢你的sn42@SGhaleb的答案解决了我的问题，但我现在将尝试您的所有建议，以改进我的代码。我现有的许多代码都是在Visual Studio中创建新项目时直接编写的，因此，学习如何正确使用您的建议会很好@sn42再次感谢。我刚刚实施了你的所有建议，效果很好：）
 constructor(props) {
    super(props);
    this.state = { lgsr: [], loading: true };

     /*some code here*/

    getData () {
        fetch('api/FormValidation/LGSR')
            .then(response => response.json())
            .then(data => {
                this.setState({
                    lgsr: data,
                    loading: false 
               });
            });

        this.setState({
           contents : this.state.lgsr
        });
    }

      render() {
        let contents = this.state.loading