Svelte 自定义商店不接受局部变量

Question

我正在尝试使用是的构建类似于 Formik 的东西，除了验证表单的函数外，每个函数都有效。

我使用的是最新版本的 svelte（不是 alpha）。

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 } }))
    }
}

更新 returns 空错误对象，而不是用匹配的错误更新存储中的错误对象。

Answer 1

正如 Rich Harris 所说，问题是，我在更新函数中使用了 promise。在 promise 之后或在 promise 内更新解决了它。


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 } }))
    }
}

Svelte 自定义商店不接受局部变量

Svelte custom store doesn't accept local variables

forms

validation

store

svelte

yup