如何在 React 中正确地 fetch() JSON

Question

我正在尝试从 url 中获取一些 json 数据。然后我将我的状态设置为该数据的一部分。

在我的渲染方法中，我想使用 map()

显示该数据

我面临的问题是，由于获取数据需要一些时间，因此在尝试呈现数据时状态仍设置为 null。

我遇到的另一个问题是我的 getData() 函数似乎每隔几秒就会重复触发一次。如果我在最后添加控制台日志，它会一遍又一遍地记录它。

如果有人看到我做错了什么，可以告诉我吗？

我的代码如下：

getData = () => {
    let _this = this
    fetch('https://my-data-link.com')
    .then(
      response => {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +
            response.status);
          return;
        }

        // Examine the text in the response
        response.json().then(
          data => {
            _this.setState({data: data.searchResults.filter(d => d.salesInfo.pricing.monthlyPayment <= _this.state.monthlyMax)})
          }
        );
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
    
    // Adding a console log here is when I noticed that the code keeps firing.
  }

  renderData = () => {
    let vehicles = "Loading..."
    let _this = this
    this.getData()
    setTimeout(function(){
      vehicles = _this.state.data.map(vehicle => (
        <h1>{vehicle.make}</h1>
      ))
      return vehicles
    }, 6000);

    return vehicles
  }
  
  render() {
    return (
      {this.state.formSubmitted > 0 &&
        <div>
          <h3 className="ch-mt--4">Recommended vehicles</h3>
          {this.renderData()}
        </div>
      }
    )
  }

Answer 1

您有两个问题

首先： 您在 render 方法中调用 getData，在 getData 中调用 setState，这实际上会触发一个循环。如果它只需要在组件挂载时触发一次，则在 componentDidMount 中触发它。

其次： 而不是不可靠的setTimeout，您应该在构造函数中将状态数据初始化为空数组

constructor(props) {
    super(props);
    this.state = {
        data: [];
    }
}
componentDidMount() {
     this.getData();
}

getData = () => {
    let _this = this
    fetch('https://my-data-link.com')
    .then(
      response => {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +
            response.status);
          return;
        }

        // Examine the text in the response
        response.json().then(
          data => {
            _this.setState({data: data.searchResults.filter(d => d.salesInfo.pricing.monthlyPayment <= _this.state.monthlyMax)})
          }
        );
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });


  }

  renderData = () => {
    let vehicles = "Loading..."
    if(this.state.data.length === 0) {
        return vehicles;
    }
    return this.state.data.map(vehicle => (
        <h1>{vehicle.make}</h1>
    ));
  }

  render() {
    return (
      {this.state.formSubmitted > 0 &&
        <div>
          <h3 className="ch-mt--4">Recommended vehicles</h3>
          {this.renderData()}
        </div>
      }
    )
  }

Answer 2

您应该在 componentDidMount 中调用 getData 如下：

componentDidMount() {
  this.getData()
}

而且你不能在render方法中调用setState它会无限循环因为设置状态后调用render方法，因为renderData正在设置状态render 方法

而不是 setTimeOut 你应该在 render 方法中执行以下操作

// in return of render method. It will display data from state after api call
{this.state.data && this.state.data.map(vehicle => (
    <h1>{vehicle.make}</h1>
))}

如何在 React 中正确地 fetch() JSON

How to properly fetch() JSON in React

api

lifecycle

state

fetch

reactjs