UseEffectHook в веб-форме
Я пытаюсь использовать хук useEffect для предварительного заполнения некоторых данных формы, но не могу заставить его работать правильно.
Я могу загрузить данные в поля, обновив страницу - тогда все работает нормально - это когда код установлен, как показано в примере.
Я могу загрузить данные в форму при ее первой загрузке, добавив «состояние» в [] на useEffect, но тогда я не могу изменить данные в форме (действие из редукса повторно запускается при каждом изменении на форма и перезаписывает все, что было введено).
load возвращается как часть редьюсера, который сначала устанавливает его в 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]);
)
}
Я новичок в реагировании и только начал использовать хуки - буду очень признателен за любую помощь в этом!
Что делает callreduxfunction? Где инициализируется state? Где определяется loading и что заставляет его меняться? Если вы хотите предварительно заполнить форму, зачем повторять это каждый раз, когда loading меняется? Слишком мало информации, чтобы адекватно ответить на ваш вопрос.
@FurkanO useEffect предназначен для возврата данных из вызова API (через действие/редуктор редукции), который является частью функции callreduxfuntion, и установки данных формы в значения, возвращаемые API.
@viviejed хорошо, понятно. Но почему вы предоставили вторые параметры для useEffect? Вам нужно сделать это более одного раза для одного и того же компонента?
@FurkanO нет, я не знаю, и я пытался удалить его, но это не имеет значения, кажется, проблема в [состоянии], которое я извлекаю из хранилища избыточности ... если я не включаю, что данные не загружается при первом отображении страницы, если я это сделаю, она перезапускается при каждом изменении и перезаписывает изменения в форме...
@viviejed, но почему бы вам не сохранить состояние редукции в качестве источника истины, чтобы не хранить одни и те же данные в компоненте? Таким образом, у вас будет второй параметр для useEffect as [], чтобы вызвать его один раз при монтировании компонента, а затем просто прочитать из избыточности и тоже записать в избыточность.
@FurkanO Я пробовал это, думая, что это логичный способ сделать это, но это не работает, когда я это делаю.
@viviejed, вы должны заставить это работать, потому что объединение управления данными, которое вы пытаетесь сделать в этом случае, не является лучшей практикой, если у вас нет особой необходимости. Вы должны больше стараться, чтобы избыточность была источником правды. Вы можете разместить/обновить свой вопрос о том, как вы не можете это сделать. Я могу помочь.
@FurkanO - да, сохранение избыточности в качестве источника правды - это то, чего я пытаюсь достичь, по крайней мере, при первой загрузке формы. Проблема в том, что если я не включу вызов функции в избыточность и состояние из избыточности, данные не будут возвращены в форму. Хотя я вижу, что вызов функции redux работает нормально, поскольку я загружаю разные поля в форму в зависимости от возвращаемых данных, и этот бит работает при загрузке страницы, кажется, что только часть setState не работает.
Я всегда использую избыточность как источник правды для управления данными формы. Я редко использую реакции внутреннего управления состоянием.
Не знаете, как это сделать? @ФурканО
Итак, вы знаете, как обновить состояние редукции? А также читать из состояния редукции? Если ответ да на оба вопроса, вы можете выполнить настройку и чтение значений формы.
так что @FurkanO, чтобы убедиться, что я прав, вы говорите, что не используете хук useState и используете только данные из избыточности?
Ага. Определенно.
@FurkanO, как будет выглядеть onChange? на данный момент у меня есть константа onChange = e => set Form Data({...formData, [e.target.name]: e.target.value });
@viviejed звучит хорошо. но если есть проблема, попробуйте отладить все с помощью инструмента Redux dev. Например, проверьте, работает ли действие так, как вы ожидали, проверив состояние и следующее состояние.
Ответы 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]);
...
В случае, если это кому-то поможет, в конце концов я изменил код на это:
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]);
)
}
Это предотвратило повторение избыточного вызова после начальной загрузки, поскольку идентификатор не меняется. Чтобы это сработало, мне также пришлось установить начальное состояние «состояния» на пустой объект в моем редукторе (оно было установлено на ноль).
Какова ваша цель использования useEffect ? Из вашего вопроса не ясно. Если вы ответите, я могу помочь.