javascript - 我收到类似 index.js:1 的错误警告：超出最大更新深度

Question

我有一个自定义钩子，它返回一个注册方法来设置对组件中输入字段的引用。

import React, { useState, useRef, useEffect } from 'react';

import { Form } from './Form';

const useFormsio = ( STATE ) => {

    const [ refs, setRefs ] = useState({});

    const register = (fieldArgs) => {
        const inputRef = useRef();
        const key = Object.keys(fieldArgs);
        //console.log(fieldArgs);
        useEffect(() => {
            setRefs(prevState => {
                return{
                    ...prevState,
                    [key]: inputRef
                }
            })
        }, [ fieldArgs ])

        return inputRef;
    }

    return [ Form, register ];
}

export { useFormsio };

组件如下，它包含输入字段，使用注册方法我传递字段名称来设置引用。

const App = () => {
    const INITIAL_STATE = {
        userName: '',
        userEmail: ''
    };
    const [ Form, register ] = useFormsio(INITIAL_STATE);
    return(
        <Form>

            <input
                type = 'text'
                placeholder = 'Enter your name'
                name = 'userName'
                data-validations = { register({ name:'userName' })} />

            <input
                type = 'email'
                placeholder = 'Enter your email'
                name = 'userEmail'
                data-validations = { register({ name:'userEmail' })} />

            <button
                type = 'submit'>
                    Submit
            </button>

        </Form>
    )
}

为什么我会收到这样的错误？

标签： javascriptreactjs

Answer 1

在我看来，您好像在无限循环的重新渲染中运行。你应该把你register()的生命周期方法放在里面。这些线上的东西-

 useEffect(()=>{
    register(fieldArgs);
},[fieldArgs])

 const register = (fieldArgs) => {
    const inputRef = useRef();
    const key = Object.keys(fieldArgs);
    //console.log(fieldArgs);
    
        setRefs(prevState => {
            return{
                ...prevState,
                [key]: inputRef
            }
        })
    

    return inputRef;
}