Пользовательский магазин Svelte не принимает локальные переменные - PullRequest
0 голосов
/ 20 октября 2019

Я пытаюсь создать что-то похожее на Formik, используя yup, каждая функция работает, кроме функции, которая проверяет форму.

Я использую последнюю версию svelte (не альфа).

const createFormik = () => {
    const { subscribe, set, update } = writable({
        values: {},
        validationSchema: {},
        errors: {}
    });

    const validate = () => {
        let newErrors = {};
        update(object => {
            object.validationSchema.validate(object.values, { abortEarly: false })
                .catch(errors => {
                    errors.inner.forEach(error => {
                        newErrors = {...newErrors, [error.path]: error.errors }
                    });
                });
            return {...object, errors: newErrors};
        })
    }

    return {
        subscribe,
        update,
        setInitialValues: (initialValues) => update(n => ({ ...n, values: initialValues })),
        setValidationSchema: (validationSchema) => update(n => ({ ...n, validationSchema: validationSchema })),
        setErrors: (errors) => update(n => ({ ...n, errors: errors })),
        validateSchema: () => validate(),
        updateFieldValue: (name, value) => update(n => ({ ...n, values: { ...n.values, [name]: value } }))
    }
}

Вместо обновления объекта ошибок в хранилище с найденными ошибками, обновление возвращает пустой объект ошибок.

1 Ответ

0 голосов
/ 21 октября 2019

Как сказал Рич Харрис, проблема в том, что я использовал обещание внутри функции обновления. Обновление после обещания или внутри обещания решило его.


const createFormik = () => {
    const { subscribe, set, update } = writable({
        values: {},
        validationSchema: {},
        errors: {}
    });

    const validate = (object) => {
        let newErrors = {};
        object.validationSchema.validate(object.values, { abortEarly: false })
            .catch(errors => {
                errors.inner.forEach(error => {
                    newErrors = { ...newErrors, [error.path]: error.errors }
                });
                console.log(object);
                update(n => ({ ...n, errors: newErrors }));
            });
        update(n => ({...n, errors: {}}));
    }

    return {
        subscribe,
        update,
        setInitialValues: (initialValues) => update(n => ({ ...n, values: initialValues })),
        setValidationSchema: (validationSchema) => update(n => ({ ...n, validationSchema: validationSchema })),
        setErrors: (errors) => update(n => ({ ...n, errors: errors })),
        validateSchema: (object) => validate(object),
        updateFieldValue: (name, value) => update(n => ({ ...n, values: { ...n.values, [name]: value } }))
    }
}

...