Question

我对React还是很陌生，尽管取得了一些令我满意的进步，但我遇到了遇到的困难，并且已经待了整整一天了。

我正在创建一个小型应用程序，该应用程序在前端使用React并通过.NET Core 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>
    );
  }
}

它非常简单的方法是调用我的API，以将单个对象返回到客户端代码，并将该对象内的每个属性呈现到单独的表列中。

我想做的是引入一个按钮，onClick将再次调用API，提取一个新对象，并更改表中新属性值的值。我对服务器端代码和随机对象的创建感到满意，但客户端代码无法正常工作。

我正在这样的组件的父标记中引入按钮：

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>


      <button onClick={this.getData}>
        Next
      </button>
    </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对象的属性传递到相应的表列中；用新数据替换以前的数据。

在API响应上更新表内容

0 个答案: