Question

我正在使用React构建一个cryptocoin应用程序，并使用json api构建最新数据。我正在使用fetch加载json api，我使用setInterval每10秒重新渲染一次应用程序。

有没有办法将以前的数据与新数据进行比较？

例如，如果值为3456且新值为3458，我想将旧数据与新数据进行比较，并使用向上箭头图标或将值设为绿色。如果新数据是3454红色。我当然可以用CSS做到这一点。我不能做的是比较旧数据和新数据之间的差异。

到目前为止我的代码：

    GetCryptoData() {
     let dataURL = this.props.coinUrl;
     fetch(dataURL)
     .then(res => res.json())
     .then(res => {
      this.setState({
       item: res
      })
    })

    componentDidMount(nextState) {
     this.GetCryptoData();
     setInterval(this.GetCryptoData.bind(this), 10000);
    };

Answer 1

最好的做法是将收到的信息添加到Redux状态，然后在组件中执行：

...
componentWillReceiveProps(nextProps) {
  if(this.props.data !== nextProps.data) {
    // Do something - data as been changed
  }
}
...

希望它有所帮助。如果您需要更多详细说明，请告诉我。另外，请检查this

Answer 2

您可以在setState

之前进行比较

.then(res => {
  // Compare here
  if (this.state.item !== res) {
    this.setState({ item: res })
  }
}

如果先前数据更改了来自获取的json文件的数据，则进行检测

2 个答案: