Question

我正在尝试从网址中获取一些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

您有两个问题

首先：您正在渲染方法中调用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

您应按以下方式致电getData中的componentDidMount：

componentDidMount() {
  this.getData()
}

此外，您无法在render方法中调用setState，因为在设置状态render方法被调用之后，这将是无限循环，因为renderData是在{{1}中调用的设置状态}方法

您应该在渲染方法中代替render

setTimeOut

如何在React中正确获取（）JSON

2 个答案: