useEffectHook в веб-форме

Question

Я пытаюсь использовать хук useEffect для предварительного заполнения некоторых данных формы, но не могу заставить его работать правильно.

Я могу получить данные для загрузки в полях, обновив страницу - тогда все работает нормально - это когда код установлен, как показано в примере.

Я могу получить данные, загруженные в форму при первой загрузке, добавив «состояние» в [] на useEffect, но затем я не могу изменить данные в форме (действие из - срабатывает при каждом изменении формы и перезаписывает все, что было набрано). загрузка возвращается как часть редуктора, который сначала устанавливает его в true, а затем в false, когда возвращается полезная нагрузка.

const EditForm = ({ reduxstore: {state, loading},  callreduxfunction, match, history}) => {

     const [formData, setFormData] = useState({
        _id: '',
        field1: ''
     })   

     useEffect( () => {
         callreduxfunction(match.params.id);
         setFormData({
            _id: match.params.id,
            field1: !loading ? state.field1 : ''
         });   

    }, [loading,  callreduxfunction, match]);

    )
}

Я довольно новичок, чтобы среагировать, и я только начал использовать хуки - буду очень признателен за любую помощь в этом вопросе!

Answer 1

В случае, если это кому-нибудь поможет, в конце концов я изменил код так:

const EditForm = ({ reduxstore: {state, loading},  callreduxfunction, match, history}) => {

         const [formData, setFormData] = useState({
            _id: '',
            field1: ''
         })   

         useEffect( () => {
             callreduxfunction(match.params.id);
             setFormData({
                _id: match.params.id,
                field1: !loading ? state.field1 : ''
             });   

        }, [state._id]);

        )
    }

Это остановило повторный вызов после повторной начальной загрузки, поскольку идентификатор не изменился.Чтобы это работало, я также должен был установить начальное состояние «состояния» для пустого объекта в моем редукторе (он был установлен в ноль).

Answer 2

Вы можете использовать несколько useEffect хуков, один для инициализации и один для обработки обновлений:

...
// When loading for the first time (Initialization)
useEffect( () => {
         // do something 

}, [ ]);

// After updating state
useEffect( () => {
         callreduxfunction(match.params.id);
         setFormData({
            _id: match.params.id,
            field1: !loading ? state.field1 : ''
         });   

}, [loading,  callreduxfunction, match]);
...