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

【问题标题】：Svelte custom store doesn't accept local variablesSvelte 自定义商店不接受局部变量
【发布时间】：2019-10-20 13:45:27
【问题描述】：

我正在尝试使用是的构建类似于 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 } }))
    }
}

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

【问题讨论】：

validate(...) 是否返回承诺？基于.catch，看起来确实如此——在这种情况下，您的errors.inner.forEach 代码在新对象返回之后运行。您可能需要验证然后调用 update 函数（同步调用其参数）

标签： forms validation store svelte yup

【解决方案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 } }))
    }
}

【讨论】：