一次显示 API 数据，而不是一次显示所有数据

Question

我遇到的问题是我这里有两个文件，一个文件正在执行 API 调用并获取一组数据（职位名称），我将其发送到另一个使用 setInterval 的文件一次显示一个。当我将项目设置为这样一个输入数组时：[{ name: "Job One" }, { name: "Job Two" }, { name: "Job Three" } 它按预期工作并根据输入的持续时间一个接一个地显示。但是，当我尝试从我的 API 调用中发送实际作业名称数组时，它们只会一次显示（总共 50 个）而不是一次显示一个。有人可以告诉我我在这里做错了什么吗？也许我在 API 调用上的 .map ？

API 示例数据

  "data": [
    {
      "6": {
        "value": "2220 Three Kings "
      },
      "40": {
        "value": "In Progress"
      }
    },
    {
      "6": {
        "value": "529 Woodsview"
      },
      "40": {
        "value": "In Progress"
      }
    }
  ]

API 调用

import { Component, React } from "react";

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

class Title extends Component {
    state = {
      data: null
    };
  
  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {
    let body = {
      from: "bpz99ram7",
      select: [3, 6],
      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}>
            <div>{data["data"][item]["6"].value}</div>
          </div>
        ))}
      </div>
    );
  }
}

export default Title;

注意：我只提取 ID“6”，即作业名称

App.js 渲染数据，使用 setInterval

import React from "react";
import "./styles.css";
import Title from "./components/TitleAPI";

const items = [
  <Title />
];

export default function App() {
  const [titleData, setTitleData] = React.useState(items[0]);
  const [index, setIndex] = React.useState(0);

  // Set Timer and Interval based on Index
  React.useEffect(() => {
    const timerId = setInterval(
      () => setIndex((i) => (i + 1) % items.length),
      2000 // 2 seconds.
    );
    return () => clearInterval(timerId);
  }, []);

  // Set TitleData with Index
  React.useEffect(() => {
    setTitleData(items[index]);
  }, [index]);

  return (
    <div className="App">
      <h4>{titleData}</h4>
      {/* <Title /> */}
    </div>
  );
}

当前结果

Job Name One
Job Name Two
Job Name Three
Job Name Four
Job Name ...Fifty

预期结果

import React from "react";
import "./styles.css";

const items = [{ name: "Job Name One" }, { name: "Job Name Two" }, { name: "Job Name Three" }, { name: "Job Name Four, etc..."}];

export default function App() {
  const [mediaItem, setMediaItem] = React.useState(items[0]);
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const timerId = setInterval(
      () => setIndex((i) => (i + 1) % items.length),
      2000
    );
    return () => clearInterval(timerId);
  }, []);

  React.useEffect(() => {
    setMediaItem(items[index]);
  }, [index]);

  return (
    <div className="App">
      <div>{mediaItem.name}</div>
    </div>
  );
}

不确定如何在此处发布结果，但将上面的代码复制并粘贴到代码沙箱中作为示例结果

谢谢！

UPDATE 想注意 <Title /> 似乎是作为一个对象过来的，当我 console.log(items.length) 它 = 1，所以我不知道如何要将其转换为一次显示多个项目的对象，请作为一个数组来一次循环遍历每个项目...

可以通过在持续时间轮换中设置 Title 和 ID 并将它们作为 props 发送来实现：

import React, { useEffect, useState } from "react";
import './App.css'
import Title from './components/header/Title'
import TotalLineChart from './components/charts/TotalLineChart'
import RadiantLineChart from './components/charts/RadiantLineChart'
import PlumbingLineChart from './components/charts/PlumbingLineChart'
import SnowmeltLineChart from './components/charts/SnowmeltLineChart'
import HVACLineChart from './components/charts/HVACLineChart'
import GasPipeLineChart from './components/charts/GasPipeLineChart'
import FixturesLineChart from './components/charts/FixturesLineChart'
// import TitleCycle from './components/TitleCycle'
// import Logo from './components/Logo';

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

function App() {
  const [allData, setAllData] = useState([]);
  const [index, setIndex] = useState(0);

  // Fetch all data, all jobs
  useEffect(() => {
      function fetchData() {
          let body = {
              from: "bpz99ram7",
              select: [3, 6, 40],
              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 }) => setAllData(data));
    }
    fetchData();
}, []);

// Cycle through the jobIds and indexes
useEffect(() => {
    const timerId = setInterval(
        () => setIndex((i) => (i + 1) % allData.length),
        5000 // 5 seconds.
    );
    return () => clearInterval(timerId);
}, [allData]);
// console.log(allData)
// console.log(index)
// Calculate info based on index
const jobId = allData[index]?.['3']?.value || '291'; // Default 291
const title = allData[index]?.['6']?.value || 'Default Title'; 
// console.log(jobId)
  return (
      <div>
        {/* <div className="flexbox-container">
          <div className="Logo">
          {/* <Logo /> */}
         {/* </div> */}
        <div className="App">
          <Title title = {title} />
        </div>
        <div className="TopChart">
          <TotalLineChart jobId = {jobId} />
        </div>
        <div className="FirstRowContainer">
          {/* <RadiantLineChart jobId = {jobId} /> */}
          <PlumbingLineChart jobId = {jobId} />
          <FixturesLineChart jobId = {jobId} />
        </div>
        <div className="SecondRowContainer">
          <SnowmeltLineChart jobId = {jobId} />
          <HVACLineChart jobId = {jobId} />
          <GasPipeLineChart jobId = {jobId} />
        </div> 
      </div>
  );
}

export default App;