Javascript 每20秒循环一次数据，而不是显示所有

我正在试图找出循环使用这些数据的最佳方法，现在我从API中获取所有id为6的“工作名称”。我想做的是在20秒左右的时间内一次只显示一个，然后移动到下一个，一次只显示一个，但持续循环所有

有什么建议吗

下面是一个api调用，用于获取作业名称的标题：

import { React, Component } from 'react';

let headers = {
  'QB-Realm-Hostname': 'XXXXXXXXXXX.quickbase.com',
  'User-Agent': 'FileService_Integration_V2.1',
  'Authorization': 'QB-USER-TOKEN XXXXX_XXXXX_XXXXXXXXXXXXXXXXXXXXX',
  '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":0,"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;

---

我不确定你们的数据是什么样子，但下面是我最接近的猜测

import { React, Component } from 'react';

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

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

    this.state = {
      data: null,
      displayItem : ''
    };

    this.dataInterval;
  }

  componentDidMount() {
    this.fetchData();
  }

  startShowingData(data) {
    let counter = 0;
    
    let dataKeys = Object.keys(data["data"])
    this.dataInterval = setInterval(() => {
          this.setState({...this.state, displayItem: data[dataKeys[counter]]});
          counter++; // you have to reset this counter at your wish or you have to do clearInterval(this.dataInterval) after array is completely traversed.
      }, 20000)
  }    

  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":0,"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.startShowingData(data.data));
    }

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

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

    return (
      <div className="Title">
              <h2>
                {this.state.displayItem}
              </h2>
      </div>
    )
  }
}

export default Title;

从“React”导入{React，Component}；
让标题={
“QB领域主机名”：“xxxxxxxxxx.quickbase.com”，
“用户代理”：“文件服务集成2.1版”，
“授权”：“QB-USER-TOKEN XXXXX XXXXX xxxxxxxxxxxxxxxxxx”，
“内容类型”：“应用程序/json”
};
类标题扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：空，
显示项：“”
};
这个.dataInterval；
}
componentDidMount（）{
这是fetchData（）；
}
开始显示数据（数据）{
设计数器=0；
让dataKeys=Object.keys（数据[“数据”]）
this.dataInterval=setInterval（（）=>{
this.setState（{…this.state，displayItem:data[dataKeys[counter]]}）；
计数器+++；//您必须根据自己的意愿重置此计数器，或者在数组完全遍历后必须执行clearInterval（this.dataInterval）。
}, 20000)
}    
fetchData=（）=>{
让body={“from”：“bpz99ram7”，“select”：[3,6,80,81,82,83,86,84,88,89,90,91,92,93,94,95,96,97,98,9910110310410510610710911111311512012322422526227222822930231477479480481]，“where:“{40.CT.”进行中“}”，“sortBy:[{“fieldId”：6，“order:“ASC”}]，“groupBy:“{“fieldId:”，“groupBy:“{“equalvalues”：”，“grouping:“equalvalues”]，“options:“skip”{：0，“compareWithAppLocalTime”：false}
取（'https://api.quickbase.com/v1/records/query', {
方法：“POST”，
标题：标题，
body:JSON.stringify（body）
}).then（response=>response.json（））
.then（data=>this.startShowingData（data.data））；
}
render（）{
const{data}=this.state；
如果（data==null）返回“正在加载作业数据…”；
返回(
{this.state.displayItem}
)
}
}
导出默认标题；

现在我得到了一份工作名单。所以只想循环这些，而不是一次显示所有。我来试试，谢谢你！所以我们将displayItem设置为空白状态，对吗？我收到了一个错误，作为

displayItem=''

的意外标记。抱歉，它应该是

displayItem:'

而不是

displayItem='

，已编辑应答似乎无法解决第19行的错误-

this.dataInterval

预期是赋值或函数调用，但看到的是表达式