在初始渲染时获取错误的响应渲染数量

Question

我写了一段Reactjs代码。这里第一个 api 正在渲染作业 id 列表。在下一个 api 中，每个作业 id 都会呈现该 id 的作业详细信息。这是例子。

api 1 - https://hacker-news.firebaseio.com/v0/jobstories.json 
o/p 1 - [35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]
api 2 - https://hacker-news.firebaseio.com/v0/item/35908337.json
o/p 2 - {
  "by": "jamilbk",
  "id": 35908337,
  "score": 1,
  "time": 1683838872,
  "title": "Firezone (YC W22) is hiring Elixir and Rust engineers",
  "type": "job",
  "url": "https://www.ycombinator.com/companies/firezone/jobs"
} 

现在我写了一个react js代码来实现同样的效果。

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [jobId, setJobId] = useState([]);
  const [jobData, setJobData] = useState([]);
  const [pages, SetPages] = useState(0);
  const [hasMore, setHasMore] = useState(true);   
  const [loading, setLoading] = useState(false);
  const No_Of_Pages = 6;
  useEffect(() => {
    fetchJobId();
  }, []);

  useEffect(() => {
    if (jobId.length > 0) fetchJobData();
  }, [pages, jobId]);

  const fetchJobId = async () => {
    const response = await fetch(
      "https://hacker-news.firebaseio.com/v0/jobstories.json"
    );
    const data = await response.json();
    setJobId(data);
  };

  const fetchJobData = async () => {
    setLoading(true);
    const JobrangeId = jobId.slice(
      pages * No_Of_Pages,
      (pages + 1) * No_Of_Pages
    ); // 0-6 , 6-12 , 12-18 ...
    const JobDataPromise = JobrangeId.map(async (id) => {
      const response = await fetch(
        `https://hacker-news.firebaseio.com/v0/item/${id}.json`
      );
      const data = await response.json();
      return data;
    });
    const jobInfo = await Promise.all(JobDataPromise);
    setJobData((prevjob) => [...prevjob, ...jobInfo]);
    setHasMore((pages + 1) * No_Of_Pages < jobData.length);
    setLoading(false);
  };
  return (
    <div className="">
      <div className="h-[500px] w-[100%]  relative p-4 bg-gray-50 overflow-y-scroll">
        <div className="flex flex-col w-[100%] h-[100%] items-center ">
          <p className="text-orange-400 font-bold text-2xl">
            {" "}
            Hacker News Jobs Board
          </p>
          {jobData.length > 0
            ? jobData.map((ele, index) => (
                <div
                  className="w-5/6 h-16 border-[1.5px] border-gray-300 m-3 p-1.5 bg-white"
                  key={index}
                >
                  <div className="flex flex-col ">
                    <div>
                      <p className="font-bold text-black text-xl">
                        {ele?.title}
                      </p>
                    </div>
                    <div className="flex justify-start gap-2">
                      <p className="font-normal text-base">By {ele?.by}</p>
                      <p>-</p>
                      <p>{ele?.time}</p>
                    </div>
                  </div>
                </div>
              ))
            : null}
          <div className="w-5/6 flex justify-start">
            <button
              className="p-3 bg-orange-400 text-white rounded-md"
              onClick={() => SetPages(pages + 1)}
              disabled={hasMore}
            >
              {loading ? "Loading..." : "Load more"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

我在这里遇到的错误是在初始渲染时，它正在渲染 12 个作业详细信息而不是 6 个。 12中后6个与前6个相同。在随后的渲染中，单击“加载更多”按钮后，它会正确渲染。为什么会出现这样的情况呢？我的代码有什么问题？预先感谢。

Answer 1

当您在严格模式下关闭

App

代码时，就会发生这种情况。如果您使用 vite 构建您的 React 应用程序，这可能会在您的

main.jsx

之类的

中

<React.StrictMode>
    <App />
</React.StrictMode>

您需要删除

<React.StrictMode>

和

</React.StrictMode>

线。现在第一次渲染时 API 不会被调用两次。

此外，这种情况仅发生在本地开发期间。部署代码后，即使不删除

StrictMode

，该 API 也不会在生产环境中被调用两次。