代码之家 › 专栏 › 技术社区 › Stu1986C

更新API响应上的表内容

reactjs javascript

Stu1986C · 技术社区 · 7 年前

我正在创建一个小应用程序,它在前端使用React,在服务器端使用.netcoreapi来提供数据。

到目前为止,以下代码有效:

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,返回一些数据并传递API的属性吗 lgsr 对象转换为相应的表列;用新数据替换以前的数据。

3 回复 | 直到 7 年前

SGhaleb 7 年前

你得把你的衣服绑起来 getData() 你的构造器,所以你可以使用 this 而不是当前函数。

this.getData = this.getData.bind(this);

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

getData = () => {....}

这将有希望解决您的问题,并允许您使用 this.state

sn42 7 年前

我看到了4种改进代码的方法:

将数据加载到 componentDidMount 生命周期方法而不是组件的构造函数( more info ). 这不应该与您的问题有关,但是在您可能设置状态之前,更安全的做法是确保组件已装载。
正如斯伽莱布提到的,确保你的 getData 函数是绑定的,可以使用箭头函数,也可以使用绑定选项,否则 this.getData 未定义且按钮 onClick 应该是禁止的。你可以用 获取数据 您的初始请求在类中没有重复的代码。
在 获取数据 你把州政府的 content
使用专用组件来呈现LGSR表,而不是使用静态呈现方法,并通过道具将所需的数据传递给它。再说一遍,与你的问题无关。

Jaz 7 年前

你想在这里达到什么目的?

我看到这里有可怕的东西。您的“加载”已在组件状态中声明,并且您正在使用lgsr数据更新“内容”状态。在渲染中,您将内容声明为此状态正在加载

 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