Question

渲染函数不会被调用两次，而是重复列表的元素，在刷新应用程序后一切正常，重复项消失。这似乎是一个角落案例，但我无法理解它。另外值得一提的是，一旦从列表中删除了一个元素，该元素及其重复项都会消失。

什么可能导致这样的错误？

import React, { useContext, useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  fetchSavedInternships,
  selectAllSavedInternships,
} from "./savedInternshipsSlice";
import { fetchInternships, selectAllInternships } from "../Anonymous/internshipsSlice";
import Loading from "../Universal/Loading";
import InternshipCard from "../Anonymous/InternshipCard";
import { v4 as uuidv4 } from "uuid";
import TabMenu from "../Universal/TabMenu";
const SavedInternships = () => {
  const dispatch = useDispatch();
  const savedInternships = useSelector(selectAllSavedInternships);
  const statusSavedInternships = useSelector((state) => state.savedInternships.status);
  const errorSavedInternships = useSelector((state) => state.savedInternships.error);
  const internships = useSelector(selectAllInternships);
  const statusInternships = useSelector((state) => state.internships.status);
  const errorInternships = useSelector((state) => state.internships.error);

  useEffect(() => {
    let user = JSON.parse(sessionStorage.getItem("user"));

    if (statusSavedInternships === "idle") {
      dispatch(fetchSavedInternships(user.id));
    }

    if (statusInternships === "idle") {
      dispatch(fetchInternships);
    }

    console.log("savedInternships");
  }, []);

  return (
    <>
      <TabMenu />

      <br />
      {(statusSavedInternships === "loading" || statusInternships === "loading") && (
        <Loading />
      )}
      {statusSavedInternships === "succeeded" && (
        <>
          {savedInternships.length > 0 ? (
            <div className="container">
              <div className="row text-center ml-1">
                <h5>Stagii salvate</h5>
              </div>
              <div className="row row-cols-2 row-cols-md-3 row-cols-lg-4">
                {savedInternships.map((savedInternship) => (
                  <div key={uuidv4()} className="mb-3 col">
                    <div className="card">
                      <InternshipCard
                        internshipId={savedInternship.internshipId}
                        companyId={
                          internships.find((c) => c.id === savedInternship.internshipId)
                            ?.companyId
                        }
                      />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div className="text-center text-muted">Nu ai salvat niciun stagiu</div>
          )}
        </>
      )}
      {statusSavedInternships === "error" && <div>{errorSavedInternships}</div>}
    </>
  );
};

export default SavedInternships;

Answer 1

您可以在第一次渲染时检查 savedInternships 的值并解决状态部分的问题（如果有），或者您可以隐式地将您正在检查的相应依赖项放入 useEffect，在这里您可以检查statusSavedInternships 和 statusInternships 在进入 useEffect 之前。

React 元素被渲染两次

1 个答案: