循环访问 API 数据，设置时间更改？

问题描述

我希望得到一些关于如何最好地循环遍历我的值以一次显示一个并且只显示 30 秒然后显示下一个值的建议。我让 API 调用正常工作，并且可以获得与 [6] 相关的所有数据，如下所示，这些数据是职位名称。因此，我不想一次显示所有作业名称，而是希望循环浏览它们，并且只显示每个作业 30 秒左右。我还有其他组件的所有数据，以显示与该作业对应的折线图。所以我的想法是循环这些作业名称，然后在呈现作业数据的每个组件上，在作业名称更改为对应时进行更改。想看看我是否能得到一些关于如何实现这一点的想法和建议！

Title.js

import { React,Component } from 'react';

let headers = {
  'QB-Realm-Hostname': 'XXXXXXXXX.quickbase.com','User-Agent': 'FileService_Integration_V2.1','Authorization': 'QB-USER-TOKEN XXXX_XXXX_XXXXXXXXXX','Content-Type': 'application/json'
};

class Title extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: null
    };
  }

  componentDidMount() {
    this.fetchData();
  }    

  fetchData = () => {    
     let body = {"from":"bpz99ram7","select":[3,6,80,81,82,83,86,84,88,89,90,91,92,93,94,95,96,97,98,99,101,103,104,105,106,107,109,111,113,115,120,123,224,225,226,227,228,229,230,231,477,479,480,481],"where": "{40.CT. 'In Progress'}","sortBy":[{"fieldId":6,"order":"ASC"}],"groupBy":[{"fieldId":40,"grouping":"equal-values"}],"options":{"skip":0,"top":1,"compareWithAppLocalTime":false}}

    fetch('https://api.quickbase.com/v1/records/query',{
      method: 'POST',headers: headers,body: JSON.stringify(body)
    }).then(response => response.json())
      .then( data => this.setState({ data })
      );
    }

  render() {
    const { data } = this.state;

      if (data === null) return 'Loading Job Data...  ';

    return (
      <div className="Title">
          {Object.keys(data["data"]).map(item => (
            <div key = {item}>
              <h2>
                {data["data"][item][6].value}
              </h2>
            </div>
          ))}
      </div>
    )
  }
}

export default Title;

正如你在上面看到的，现在基于 body "options": "top":1，它一次只显示一个值，但我想循环它们。如果我将其更改为 0，则显示该字段 ID 为 6 的所有值。

我还附上了我的应用程序屏幕截图，以显示我正在尝试执行的操作、显示作业名称、以及每 30 秒循环显示该作业数据的相应折线图以显示所有作业及其数据。

我曾想过使用像 splide.js 或 glide.js 这样的滑块库来更改每一个，但只是尝试从标题开始，并尝试根据显示的标题绑定折线图。

提前致谢！

解决方法

您可以使用 setInterval() 使代码中的某些事情定期发生。在这种情况下，您可以使用它一次只显示一条返回的记录。如果您向状态对象添加了一个属性来跟踪当前显示的获取数据的索引，您可以执行类似以下操作：

componentDidMount() {
  this.fetchData();
  setInterval(() => updateDisplay(),30000)
}   

updateDisplay() {
  let index = this.state.currentIndex + 1;

  if(!this.state.data.data || index >= this.state.data.data.length) index = 0;
  
  this.setState({data: this.state.data,currentIndex: index});
}

render() {
  const { data,currentIndex } = this.state;

  if (data === null) return 'Loading Job Data...  ';

  return (
    <div className="Title">
        <div key = {item}>
          <h2>
            {data["data"][currentIndex]["6"].value}
          </h2>
        </div>
  </div>
  )
}

以上需要一些清理，您需要在类的其他设置状态的部分中包含 currentIndex ，但原则上它应该可以工作。基本上，一次只呈现一个返回的记录，而不是整个列表。显示的特定记录由 this.state.currentIndex 控制，并且每 30 秒调用一次 updateDisplay() 以使用一些基本保护措施更新该索引。