Повторное применение старых значений в реагировании при применении пользовательской проверки в поле <Input> из «Reactstr ⇐ Javascript

[Anonymous]

У меня возникает проблема с повторным появлением старых значений в React TS. Изначально я предоставляю свой код, чтобы вы также могли проверить его: < /p>
const initialState = {
name: '',
};

const [registeredValidations, setRegisteredValidations] = useState({} as RegisteredValidationMap);
const [formData, setFormData] = useState({
...initialState,
name: requestStore.formData.name[0] || initialState.name
});

< /code>
И вот звонок моей пользовательской реализованной проверки для поля ввода и проверки: < /p>




< /code>
Реализация прослушивателя Onchange: < /p>
const handleOnChange = (e: ChangeEvent) => {
const { name, value } = e.target;

setFormData(prevState => ({
...prevState,
[name]: value,
}));
};
< /code>
GenericInputValidation: < /p>
export class GenericInputValidation extends Validation {
// eslint-disable-next-line @typescript-eslint/require-await
static async validate(props: ValidationProps): Promise {
const errors = [];

if (props.newValue === '' && !props.isOptional) {
errors.push(translate('error.missing-value'));
}

return errors;
}
}
export default GenericInputValidation;
< /code>
и теперь реализация поля ValidatedInput: < /p>
export const ValidatedInput = (props: ValidatedInputProps) => {
const [errors, setErrors] = useState([...(props.externalErrors || [])]);

const errorMessages = filterMessagesByType(errors, ERROR_TEMPLATES) || [];
const warningMessages = filterMessagesByType(errors, WARNING_TEMPLATES) || [];

let css = '';
if(errorMessages.length !== 0){
css= 'validation-failed'
}else if(warningMessages.length !== 0){
css = 'validation-warning'
}

const DOMprops = getDomProps(props);
registerValidationComponent(props, errorMessages.length > 0 ? errorMessages : warningMessages, setErrors);

return (

{
generateBlur(props, errors, setErrors)(e);
}}
id={props.id || props.name}
className={css}
key={props.id + errors.length}
readOnly={props.readOnly}
type={props.type}
maxLength={props.maxLength}
/>
{errors.length !== 0 && (

{getErrorsForTooltip(errors)}

)}

);
};

export default ValidatedInput;
< /code>
и реализация навигации: < /p>
const navigate = useNavigate();
const dispatch = useDispatch();
const defaultBack = () => {
navigate(-1);
};
const [warningAcknowledged, setWarningAcknowledged] = useState(false);
const handleBackClick = () => {
dispatch(setWarningsAcknowledged(false));
setWarningAcknowledged(false);
if (props.handleOnBackClick) {
props.handleOnBackClick();
} else {
defaultBack();
}
};

useEffect(() => {
setWarningAcknowledged(false);
}, [JSON.stringify(props.registeredValidations)]);

const nextFunction = async () => {
const foundErrors = [];
for (const registered of Object.values(props.registeredValidations)) {
const { value, validations, customValidations, errors, setErrors } = registered;
const validationProps: ValidationProps = {
name: registered.name,
newValue: value,
validations,
customValidations,
errors,
setErrors,
isOptional: registered.isOptional,
maxLength: registered.maxLength,
};

foundErrors.push(...(await runValidations(validationProps)));
}

const errorMessages = filterMessagesByType(foundErrors, ERROR_TEMPLATES);
const warningMessagesFiltered = filterMessagesByType(foundErrors, WARNING_TEMPLATES);
const infoMessages = filterMessagesByType(foundErrors, INFO_TEMPLATES);
const hintMessages = filterMessagesByType(foundErrors, HINT_TEMPLATES);
const warningMessagesAndInfo = warningMessagesFiltered.concat(infoMessages);
const warningMessages = warningMessagesAndInfo.concat(hintMessages);

if (errorMessages.length > 0) {
return;
} else if (warningMessages.length > 0 && !warningAcknowledged) {
setWarningAcknowledged(true);
return;
}

props.handleOnNextClick();
return (



{!props.hideBack && (



)}



{!props.hideNext && (
{
nextFunction();
}}
>


)}



);
< /code>
Теперь, когда все будет сделано, и вызовите ValidatedInput на странице, и сохранить значения (которые случаются на связи), затем возвращаюсь на эту страницу, я получил значения из магазина запросов, показанных в Поле ввода, которое префектно нормально. И теперь, когда я хочу удалить вход (просто для запуска проверки) и нажмите Далее - запускается проверка, что в порядке, но значение в поле возвращает старый, вместо на новый и покажите, что это поле неправильно. ""
Щелкни «Нажмите кнопку« Далее »запускает проверку и вместо того, чтобы оставаться значением« », он возвращает« test123 »< /p>
Есть идеи, как это исправить? < /p>

Подробнее здесь: https://stackoverflow.com/questions/794 ... on-input-f