REACT - 从API获取数据后，在Formik Form中设置初始数据。

Question

我试图为我正在做的一个项目做一个编辑页面，我似乎无法让表单填写来自我的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) => {
                            setTimeout(() => {
                                alert(JSON.stringify(values, null, 2));
                            }, 3000)
                        }}
                    >
                        {props => (
                            <Form>
                                <Grid container spacing={2}>
                                    <Grid item xs={6}>
                                        <TextField name="bookId" label="Book ID" variant="outlined" 
                                             margin="dense" color="secondary" type="input"/>
                                        <TextField name="title" label="Title" variant="outlined" 
                                             margin="dense" color="secondary" type="input"/>
                                        <TextField name="description" label="Description" type="input"
                                             variant="outlined" margin="dense" color="secondary" />
                                        <TextField name="author" label="Author" variant="outlined" 
                                             margin="dense" color="secondary" type="input"/>
                                    </Grid>
                                </Grid>
                                <DialogActions >
                                    <DangerButton icon={<SaveRecordIcon />} label="Save"
                                        handleClick={() => alert("Save")} />
                                    <PrimaryButton icon={<PlusIcon />} label="Submit"
                                        handleClick={() => props.handleSubmit()} />
                                    <NeutralButton label="Next" handleClick={() => alert("next")} />
                                </DialogActions>
                            </Form>
                        )}
                    </Formik>
                    : <OverlaySpinner />
            }
        </div >
    )
}

export default EditBookInfoForm

下面是我的API的结果。

[{
    bookId: 1
    title: "Anna Karenina"
    description: "Anna Karenina tells of the doomed love affair between the sensuous and rebellious Anna and the dashing officer, Count Vronsky."
    author: "Leo Tolstoy"
}]

Answer 1

你可以替换检查数据现有的从。

(data !== undefined)

to:

(data && data.length > 0)