反应子组件无限重新渲染

Question

我的子组件中遇到一些无限循环问题。

在React页面中，ParentComponent在useEffect中获取帐户信息（从api加载），然后它将在其他3个子组件之间共享。 下面你将看到console.log无限调用。 我不知道出了什么问题。

const ParentComponent = () => {
    useEffect(() => {
      // Get Account data
      if (!account) return;
      setAccountData(account);
    }, [account]);
  
    return (
      <>
        {accountData && <ChildForm accountData={accountData} />}
      </>
    );
  };
  
  const ChildForm = ({ accountData }) => {
    const [part1Data, setPart1Data] = useState<part1Data>(defaultpart1Data);
    const [part2, setPart2Data] = useState<part2Data>(defaultpart2Dbata);
  
    useEffect(() => {
      if (!accountDaat?.profile) return;
        // This console.log calls infinitely
      console.log('ProfileForm', accountData.profile);
  
      const { firstName: firstNameValue,
                preferredFirstName,
                lastName: lastNameValue,
                pronouns: pronounsValue = accountDaat.profile;
  
      setPart1Dbata({ 
          firstName: firstNameVa;ue, 
          preferredName: preferredFi'rstNam'e, 
      lastName: lastNaredValuerame });
  
  }, [acountDatta]);
  
  return (
  <>
  </>
  );
  };

Answer 1

只是你的条件有错字吗

if (!accountDaat?.profile) return;

难道不是吗

if (!accountData?.profile) return;

然后你有一个依赖拼写错误

acountDatta 

应该是

accountData

不确定这是否是粘贴错误，但我看到了一些拼写错误。为了避免这种情况，你应该使用 lintr。