为什么在没有严格模式的情况下我的组件渲染两次？

问题描述

我想寻求一些帮助，我不知道它是否正常。 具有此组件，一个是用于获取数据的容器，第二个用于接收数据并将其显示在div中。没什么。

const ProjectContainer = () => { // component
  const projects = useSelector((state) => state.projectReducer.projects);
  const count = useSelector((state) => state.projectReducer.count);
  const isDarkMode = useSelector((state) => state.themeReducer.isDarkMode);
  const [isLoading,setIsLoading] = useState(false);
  const limit = 5;
  const dispatch = useDispatch();

  useEffect(() => {
    console.log("INSIDE USEFFECT");
    if (projects.length > 0) return; // avoid fetching data if the state has data already
    async function getData() {
      setIsLoading(true);
      try {
        const projectsCollectionRef = db.collection("project-collection");
        const projectsCountRef = db
          .collection("aggregation")
          .doc("project-collection");
        console.log("FETCHING DATA");
        const responseCount = await projectsCountRef.get();
        const count = await responseCount.data().count;
        //dispatch
        dispatch({ type: "SET_PROJECTS_COUNT",payload: count });
        const response = await projectsCollectionRef
          .orderBy("createdAt")
          .limit(limit)
          .get();
        let dataSend = [];
        response.forEach((document) => {
          dataSend.push({ ...document.data(),uid: document.id });
        });
        //dispatch
        dispatch({ type: "SET_PROJECTS",payload: dataSend });
        setIsLoading(false);
      } catch (error) {
        console.error(error);
      }
    }
    getData();
  },[dispatch,projects.length]);
  return (
    <div className="container mx-auto text-center">
      <div>
        Proyectos
      </div>
      {isLoading && projects.length === 0 ? (
        <div >
          <div id="title">
            <p>
              Cargando....
            </p>
          </div>
        </div>
      ) : (
        <>
          {projects.length === 0 ? (
            <div >
              <div id="title" >
                <p>
                  No hay proyectos que mostrar....                 
                </p>
              </div>
            </div>
          ) : (
            <>
              <div >
                {projects.map((project,index) => {
                  return (
                    <Project data={project} index={index} key={project.uid} />
                  );
                })}
              </div>
              {count !== projects.length && (
                <button>
                  Cargar más
                </button>
              )}
            </>
          )}
        </>
      )}
    </div>
  );
};

export default ProjectContainer;

显示数据的组件是这样的

import React from "react";
import { useSelector } from "react-redux";

const Project = (props) => {
  const { data,index } = props;
  console.log({ index });
  const isDarkMode = useSelector((state) => state.themeReducer.isDarkMode);
  return (
    <div>
      <div id="image">
        <div>
          <img
            src={data.imageURL}
            alt=""
           />
        </div>
      </div>
      <div id="textblock">
        <h1 >
          {data.name}
        </h1>
        <div id="description">
          <span >{data.description}</span>
          <div >
            <p>
              Tecnologías
            </p>
            {data.technologies.map((technology) => {
              return (
                <span key={technology}>
                  {technology}
                </span>
              );
            })}
          </div>
          <div >
            <div >
              <span>
                Api Utilizada:
              </span>
            </div>
            <div >
              <span>
                {data.usedAPI}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Project;

我的意思是，它可以工作，可以完成工作，但是我不知道它是否正确，在更现实的公司工作中，它应该像这样工作吗？

我读到严格模式可以强制进行一些重新渲染，但是我检查了却没有。

最终控制台看起来像这样..

提前感谢大家：）

解决方法

即使在同一循环中调用多个dispatch函数，React也会为每个dispatch重新渲染一次。本文对此提供了一些很好的信息： https://medium.com/unsplash/react-redux-performance-considerations-when-dispatching-multiple-actions-5162047bf8a6

幸运的是，有一个解决方案：Redux提供的batch函数： https://react-redux.js.org/api/batch

只需从dispatch内调用您的两个batch调用，您应该看到它仅重新呈现一次。