可以将一系列数据插入formik状态。仅设置一个元素

Question

我尝试将一系列文件添加到formik状态，

formik状态中的“文件”属性中：

initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    phoneNumber: '',
                    files: [],
                }}

但是，无论我选择多少个文件，始终设置了数组中唯一的一个元素。它不断与下一个重新录制！

此处（src/components/dragandDrop/draganddrop.js）我在ondrop函数中应用setFieldValue，因此每次迭代在每个迭代中都添加了每个下一个文件添加到formik state中，但不是。只有单个文件！？

export const DragAndDrop = ({ name, setFieldValue = f => f, currentFiles }) => {
    const styles = useStyles()

    const onDrop = useCallback(
        acceptedFiles => {
            acceptedFiles.forEach(file => {
                setFieldValue(name, [...currentFiles, file])
            })
        },
        [name, setFieldValue, currentFiles]
    )
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ onDrop })

    return (
        <>
            <div className={styles.fullBlock}>
                <Paper {...getRootProps({ className: 'dropzone' })} className={styles.root}>
                    <input {...getInputProps()} name={name} />
                    <CloudUploadIcon className={styles.icon} />
                    <Typography
                        variant="subtitle1"
                        gutterBottom
                        component="p"
                        className={styles.text}
                    >
                        Drag and drop some files here, or click to select files
                    </Typography>
                </Paper>
            </div>

            <aside className={styles.fullBlock}>
                <List sx={{ width: '100%', maxWidth: '100%' }} className={styles.fullBlock}>
                    {acceptedFiles.map((file, i) => (
                        <ListItem key={i}>
                            <ListItemAvatar>
                                <InsertDriveFileIcon className={styles.iconFile} />
                            </ListItemAvatar>
                            <ListItemText primary={file.path} secondary={file.size} />
                        </ListItem>
                    ))}
                </List>
            </aside>
        </>
    )
}

在树和最后一个的组件

export const Step3 = ({ context }) => {
    const { setFieldValue, values } = context
    console.log(values)
    return (
        <>
            <Title text={'Step 3'} iconRender={<AccountCircleRoundedIcon />} />
            <DragAndDrop name={'files'} setFieldValue={setFieldValue} currentFiles={values.files} />
            <MyButton>Next</MyButton>
        </>
    )
}

，更高。

export const App = () => {
    const [haveNumber, setHaveNumber] = useState(false)
    return (
        <>
            <Formik
                initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    phoneNumber: '',
                    files: [],
                }}
                validationSchema={Yup.object({
                    firstName: Yup.string()
                        .max(15, 'Have to be 15 characters or less')
                        .required('Required'),
                    lastName: Yup.string()
                        .max(20, 'Have to be 20 or less characters')
                        .required('Required'),
                    email: Yup.string().required('Required.'),
                    phoneNumber: haveNumber
                        ? Yup.string().phone('UA', false, 'Phone number is invalid')
                        : Yup.string(),
                })}
                onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2))
                        setSubmitting(false)
                    }, 400)
                }}
            >
                {context => (
                    <Form>
                        <MainContainer>
                            {/*<Step1 />*/}
                            {/*<Step2 context={context} setHaveNumber={setHaveNumber} />*/}

                            <Step3 context={context} />

                            {/*<input type="submit" />*/}
                            {/*<input type="file" multiple onInput={() => console.log('file added')} />*/}
                        </MainContainer>
                    </Form>
                )}
            </Formik>
        </>
    )
}

github：

怎么了？如何解决？

Answer 1

您已经尝试过：

const currentFilesCopy = currentFiles.slice(0); // to get a copy of the original array

currentFilesCopy.push(fileThatJustGotUploaded);

setFieldValue(files, currentFilesCopy);