無法將數據數組插入 Formik state。僅設置一個元素

Question

我嘗試將一組文件添加到 Formik state 的“文件”屬性中，

福米克 state：

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

但無論我選擇多少個文件，數組的唯一一個元素總是被設置。 它不斷地與下一個重新錄制！

在這里 (src/components/DragAndDrop/DragAndDrop.js) 我在 onDrop function 中應用 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: https://github.com/AlexKor-5/FormChallenge/tree/ed022501ecd741eb198ab56a693878522f48108a

有什么事？ 如何應對？

Answer 1

您是否已經嘗試過：

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

currentFilesCopy.push(fileThatJustGotUploaded);

setFieldValue(files, currentFilesCopy);