0

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

标题.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;

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

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

应用截图

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

提前致谢！

4

1 回答 1

1

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

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并updateDisplay()每 30 秒调用一次，以使用一些基本保护措施更新该索引。

于 2021-05-28T15:33:56.047 回答