React useEffect 无限循环

Question

const EmailSelection: React.FC<{emails: EmailDataType[] | undefined}> = ({emails}) => {
    const [emailsCopy, setEmailsCopy] = useState<EmailDataType[] | undefined>(emails);
    const [defaultEmail2, setDefaultEmail2] = useState<string>();
   
    useLayoutEffect(() => {
        setDefaultEmail2(emailsCopy?.find(email => email.isDefault)?.email);
    }, [emailsCopy])
     

    const changeDefaultEmail = ((selectedEmail: string) => {
        const emailsCopy2 = emailsCopy?.map(email => {
            return email.email === selectedEmail ? { ...email, isDefault: true }
                : { ...email, isDefault: false }
        });
        setEmailsCopy(emailsCopy2);
    });


    return (
        <IonPage >
            <IonContent className={[style['main-content'], 'ion-padding'].join(' ')} >
                <IonRadioGroup
                    value={defaultEmail2}
                    onIonChange={e => changeDefaultEmail(e.detail.value)}>
                    {emailsCopy?.map((email) => {
                        return (
                            <IonItem key={email.email} lines='none' className='ion-margin-start'>
                                <IonLabel>{email.email}</IonLabel>
                                <IonRadio slot='start' value={email.email} />
                            </IonItem>
                        );
                    })}
                </IonRadioGroup>
            </IonContent>
        </IonPage>
     );
 };

export default EmailSelection;

方法 changeDefaultEmail 在单选按钮 onChange 事件上执行。由于某种原因，这会在此函数和 useLayoutEffect 之间启动一个无限循环。我不知道为什么。

我在这个问题上苦苦挣扎了很长时间！

Answer 1

这是循环： useLayoutEffect -> 更改 defaultEmail2 -> 触发收音机 onChange -> 调用 changeDefaultEmail -> 更改 emailsCopy -> 再次触发 userLayoutEffect