太多的重新渲染。 React 限制渲染次数以防止在传递状态时出现无限循环？答案

【问题标题】：Too many re-renders. React limits the number of renders to prevent an infinite loop when passing states?太多的重新渲染。 React 限制渲染次数以防止在传递状态时出现无限循环？
【发布时间】：2021-02-22 08:37:44
【问题描述】：

我正在尝试从一个组件访问另一个组件的状态

FetchCompo.js

// import React from "react";
import React, { useState, useEffect } from "react";
//more imports

const FetchUserItems= () => {
   //some state
  const [userFirstName, setUserFirstName] = useState("");
  const [userItem, setUserItem] = useState([]);


  let userName = //somecode
    
  setUserFirstName(userName);

  let userItemsData= userData.MyArray.items;

  if (userItemsData.length === 0) {
    const emptyItems = [
      {
       //obj data
      },
    ];
    setUserItem(emptyItems );
  } else {
    //someData
    setUserItem(userItemsData);
  }

  return { userFirstName, userItem};
};

export default FetchCompo;

我想在另一个 Test.js 组件中使用 userFirstName, userItem。

// import React from "react";
import React, { useState, useEffect } from "react";
import FetchCompofrom "../myFunctions/FetchCompo";

//more imports

const Test = () => {
 
  //Wanted to use userFirstName in Test.js component
  const { userFirstName, userItem } = FetchCompofrom();

return (
   <div>{userFirstName}</div>
  
 )
}

当我尝试获取 Test.js 组件中的 userFirstName、userItem 时，会出现 Too many renders 的错误

寻找一种解决方案，我可以如何访问这些状态 userFirstName, userItem 从一个组件到另一个组件。

【问题讨论】：

请在您的问题中包含您的useEffectss ...

标签： javascript html reactjs react-native

【解决方案1】：

您实际上是在导入 React 组件，而不是 FetchUserItems 辅助函数...

import FetchCompofrom "../myFunctions/FetchCompo";

但你可以做类似...

const [userFirstName, setUserFirstName] = useState('');
const [userItem, setUserItem] = useState([]);

const FetchUserItems = () => {
  /** 
   * Make it plain helper function for fetching userItems
   * Do-not set-state here...
   */

  return { userFirstName, userItem };
};

export const FetchUserItems;

/** In your component ... say in useEffect */
const result = FetchUserItems();
/** setState here in case of result */

在Test.js

import { FetchUserItems } "../myFunctions/FetchCompo";

【讨论】：

【解决方案2】：

您在FechUserItems、useEffect 或正常功能之外使用setUserFirstName(userName)，这将引发组件无限期地重新渲染，因为设置状态会引发重新渲染。

我建议将 FetchUserItems 设为普通函数，因为您不会在其中渲染任何内容。您只能使用 Test comp。

Test comp 是这样的：

// import React from "react";
import React, { useState, useEffect } from "react";
import FetchCompofrom "../myFunctions/FetchCompo";

//more imports

const Test = () => {

   const [userFirstName, setUserFirstName] = useState("");
  const [userItem, setUserItem] = useState([]);

   useEffect(() => fetchUserFirstName, [])
   
   const fetchUserFirstName = () => {
      // your code here and 
      // setUserFirstName in the end
}


 
  //Wanted to use userFirstName in Test.js component
  const { userFirstName, userItem } = FetchCompofrom();

return (
   <div>{userFirstName}</div>
  
 )
}

【讨论】：