React Material UI + Formik FieldArray 自动完成控件值在删除时保持不变

Question

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

\n

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

\n

Answer 1

代替

arrayHelpers.insert()

我用过

arrayHelpers.push()

它对我来说工作得很好。