小编G J*_*osh的帖子

我正在尝试为我正在处理的项目创建一个编辑页面，但我似乎无法使用来自 API 的初始值填写表单。我希望在从 REST API 获取数据后，它将被设置为表单字段的初始值，但是，看起来并没有发生这种情况。我可以做些什么来实现根据从 API 获取的值预填充表单字段的目标？

这是我的代码：

const EditBookInfoForm= (properties) => {
    const [data, setData] = useState();

    useEffect(() => {
        fetch(apiUrl + properties.bookId)
        .then(response => response.json())
        .then(result => {
            setData(result);
        });
    }, []);

const validationSchema = Yup.object().shape({
        title: Yup.string()
            .max(50, 'You may only enter up to 50 characters')
            .required('Required'),
        description: Yup.string()
            .max(200, 'You may only enter up to 200 characters')
            .required('Required'),
        author: Yup.string()
            .required('Required')
    })

    return (
        <div>
            {
                (data !== undefined) ?
                    <Formik initialValues={data}
                        validationSchema={validationSchema}
                        onSubmit={(values) => …

Formik 很新，我有一个简单的表单，它有验证。我需要有 2 个按钮，提交和保存按钮，它们大多会做同样的事情，但是，如果单击“保存”按钮，我希望验证被“禁用”，或者更确切地说，不再需要所有必填字段. 我有什么想法可以实现这一目标吗？

下面的一些代码：

const initialValues = {
    title: "",
    description: ""
};

const validationSchema = Yup.object().shape({
        title: Yup.string()
            .max(50, 'You may only enter up to 50 characters')
            .required('Required'),
        description: Yup.string()
            .max(200, 'You may only enter up to 200 characters')
            .required('Required'),
        })


const CreateForm = () => {

    const handleCancel = () => {
        alert("Cancelled!")
    }

    return (
        <div>
            <Formik initialValues={initialValues}
                validationSchema={validationSchema}
                onSubmit={(values) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2));
                    }, 3000)
                }}
            >
                {props => ( …