Блог

ПОЖАЛУЙСТА, ПОМОГИТЕ! Моя проблема, с которой я сталкиваюсь, заключается в том, что у меня здесь есть два файла, один из которых выполняет вызов API и получает данные (названия должностей), и я отправляю это в другой файл, который использует setInterval для отображения по одному за раз. Когда я устанавливаю элементы в введенный массив следующим образом: [{ name: "Job One" }, { name: "Job Two" }, { name: "Job Three" } он работает так, как ожидалось, и отображается один за другим в зависимости от введенной продолжительности. Но когда я пытаюсь отправить массив фактических названий заданий из моего вызова API, все они появляются сразу (всего 50), а не по одному за раз. Может кто-нибудь сказать мне, что я здесь делаю не так?

Примеры данных 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;
 

NOTE: I’m only pulling ID «6» which is the Job Name

App.js to render data, with 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>
  );
}
 

Current Result

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

Expected Result

 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>
  );
}
 

Скопируйте и вставьте в песочницу кода (React) для демонстрации того, как я пытаюсь заставить каждое имя задания отображаться по одному (в настоящее время просто отображаются все).

Хотел отметить, что он появляется <Title /> как объект, когда я console.log(элементы.длина) it = 1, поэтому я не уверен, как преобразовать это в то, чтобы вместо того, чтобы отображать объект из нескольких элементов одновременно, переходить в виде массива, чтобы перебирать каждый из них за раз…