Question

state={url:'someurl' , stockData=[], error:false}

在初始安装时，我将从api获取数据并将其设置为状态。

      componentDidMount() {
        this.getDataFromApi();
      }

抓取数据和设置stockData状态的功能

    getDataFromApi = () => {
        fetch(this.state.url)
          .then(res => res.json())
          .then(
            res => {
              const sortedRes = res["results"].sort(function(a, b) {
                return b.ask_price - b.bid_price - (a.ask_price - a.bid_price);
              });
              this.setState(
                {
                  stockData: sortedRes
                }
              );
            },
            res => this.setState({ error: true })
          );
      };

这些数据总是在改变我如何获得实时更新？

我尝试使用componentWillUpdate比较当前状态和下一个状态，并使用setTimeOut延迟3秒，这样它就不会如此快速地调用fetchData()但是延迟不起作用并且fetchData在很短的时间内被称为太多次了。

  componentWillUpdate(nextProps, nextState) {
 if(nextState.stockData !== this.state.stockData) {
    fetch(this.state.url)
      .then(res => res.json())
      .then(this.delay(function() {
              res => {
                const sortedRes = res["results"].sort(function(a, b) {
                  return b.ask_price - b.bid_price - (a.ask_price - a.bid_price);
                });
                console.log(sortedRes);
                this.setState(
                  {
                    stockData: sortedRes
                  },
                //  () => console.log("SORTED RES", sortedRes)
                );
              },
              res => this.setState({ error: true })
      }, 3000)) // waits 3s
      return true;
    }
    else {
      return false;
    }
  }

Answer 1

setTimeout无效的原因是因为您不能阻止每次通话的发生。你只是将每一个延迟3秒。我建议将整个Api通话放在setInterval的{{1}}内。

componentDidMount

当组件卸载时，请记住要进行内务处理，否则即使从DOM中删除组件，您的componentDidMount() { this.apiCall = setInterval(() => { this.getDataFromApi(); }, 3000) }也永远不会停止。

setTimeout

您将使用什么组件生命周期来更新从api接收的数据

1 个答案: