reactjs - React Material UI + Formik FieldArray 自动完成控制值在移除时保持不变

Question

我想使用 Formik 的表单验证，它实际上工作得很好，但我在自动完成组件中的选定值显示方面遇到了一些问题。我已创建 添加 /删除 按钮来动态调整我的表单中有多少行。当我尝试删除表单行时出现错误，下面的行在幕后具有在 DEBUG 中显示的正确值，但用户的输入显示来自已删除表单行的值。我不知道如何显示或处理这种情况。
Form before removal ,
Form after removal

<FieldArray name="actions"
        render={arrayHelpers =>
            values.actions.map((action, index) => (
                <Grid item container spacing={1} justify="center" alignItems="center"
                        key={index}>
                    <Grid item xs={4}>
                        <Field
                            error={getIn(errors, `actions.${index}.suggestedAction`) &&
                            getIn(touched, `actions.${index}.suggestedAction`)}
                            helperText={<ErrorMessage
                                name={`actions.${index}.suggestedAction`}/>}
                            name={`actions.${index}.suggestedAction`}
                            id={`actions.${index}.suggestedAction`}
                            variant="outlined"
                            fullWidth
                            as={TextField}
                            label="Siūloma priemonė"
                            multiline
                            rows={3}
                            rowsMax={10}
                        />
                    </Grid>
                    <Grid item xs={4}>
                        <Autocomplete
                            freeSolo
                            onBlur={handleBlur}
                            onChange={(e, value) => {
                                //If adding new
                                if (value && value.inputValue) {
                                    setOpen(true);
                                    setFieldValue(`actions.${index}.responsiblePerson`, value.inputValue)
                                } else if (value && value.id) {
                                    //Selecting existing
                                    setFieldValue(`actions.${index}.responsiblePerson`, value.id)
                                } else {
                                    setFieldValue(`actions.${index}.responsiblePerson`, "")
                                }
                            }}
                            getOptionLabel={(option) => {
                                if (typeof option === 'string') {
                                    return option;
                                }
                                if (option.inputValue) {
                                    return option.inputValue;
                                }
                                return option.title;
                            }}
                            handleHomeEndKeys
                            clearText="Pašalinti"
                            noOptionsText="Tuščia..."
                            renderOption={option => option.title}
                            filterOptions={(options, params) => {
                                const filtered = filter(options, params);
                                if (params.inputValue !== '') {
                                    filtered.push({
                                        inputValue: params.inputValue,
                                        title: `Pridėti "${params.inputValue}"`,
                                    });
                                }
                                return filtered;
                            }}
                            renderInput={params => (
                                <TextField
                                    {...params}
                                    id={`actions.${index}.responsiblePerson`}
                                    name={`actions.${index}.responsiblePerson`}
                                    error={getIn(errors, `actions.${index}.responsiblePerson`) &&
                                    getIn(touched, `actions.${index}.responsiblePerson`)}
                                    helperText={<ErrorMessage
                                        name={`actions.${index}.responsiblePerson`}/>}
                                    onChange={handleChange}
                                    variant="outlined"
                                    label="Atsakingas asmuo"
                                    placeholder="Vardenis Pavardenis"
                                />
                            )}
                            options={top100Films}/>
                    </Grid>
                    <DateTimeUtilsProvider>
                        <Grid item xs={3}>
                            <Field
                                disableToolbar
                                as={KeyboardDatePicker}
                                variant="inline"
                                inputVariant="outlined"
                                format="yyyy-MM-dd"
                                id={`actions.${index}.deadline`}
                                name={`actions.${index}.deadline`}
                                error={getIn(errors, `actions.${index}.deadline`) &&
                                getIn(touched, `actions.${index}.deadline`)}
                                helperText={<ErrorMessage
                                    name={`actions.${index}.deadline`}/>}
                                label="Įvykdymo terminas"
                                onChange={value =>
                                    setFieldValue(`actions.${index}.deadline`, value)}
                            />
                        </Grid>
                    </DateTimeUtilsProvider>
                    <Grid item xs={1}>
                        <ButtonGroup fullWidth orientation="vertical" size="medium">
                            <Button onClick={() => {
                                arrayHelpers.remove(index);
                            }}
                                    disabled={values.actions.length === 1}
                                    classes={removeButtonClasses}>
                                <HighlightOff/>
                            </Button>
                            <Button onClick={() => {
                                arrayHelpers.insert(index + 1, {
                                    suggestedAction: "",
                                    responsiblePerson: "",
                                    deadline: Date.now()
                                })
                            }}
                                    color="primary">
                                <AddCircleOutline/>
                            </Button>
                        </ButtonGroup>
                    </Grid>
                </Grid>
            ))
        }
/>
</Grid>

Answer 1

代替

arrayHelpers.insert()

我用过了

arrayHelpers.push()

它对我来说工作正常。