javascript - ANT Design Form.List 不会删除元素

Question

我的计划是逐步构建，用户可以根据需要向表单添加更多部分。这个计划被分成几个文件来实现结果，包括一个父级、一个子级和 Quill 编辑器组件。我遵循了 ANT Design 网站中的示例：https ://ant.design/components/form/#components-form-demo-dynamic-form-items但未能复制该示例。

这是 React-Quill Editor 组件的设置：

//texteditorsimple.js
import React from 'react';
import ReactQuill, {Quill} from 'react-quill';
import MagicUrl from 'quill-magic-url';
import 'react-quill/dist/quill.snow.css';

//registering magic url module
Quill.register('modules/magicUrl', MagicUrl);

const modules = {
    toolbar: [
        ...
    clipboard: {
        ...
    },
    magicUrl: true,
};

const formats = [
    'list',
    'bullet',
    'link',
];

const TextEditorSimple = ({ value, onChange, placeholder }) => {
    return (
        <>
            <ReactQuill
                theme="snow"
                value={value || ''}
                modules={modules}
                formats={formats}
                onChange={onChange}
                placeholder={placeholder} >
            </ReactQuill>
            <div id='counter'></div>
        </>
    )
}
export default TextEditorSimple;

这是父组件：

//parent.js
import React, { useState, useEffect } from 'react';
...
import Child from '../child';

const Parent = () => {
    const [ formValue2, setFormValue2 ] = useState([]);

    const deleteY = (data) => {
        const newArrayFormValue = formValue2.filter(obj => !obj.name.includes(data));
        setFormValue2(newArrayFormValue);
    }
    return (
        <Row justify='center' align="top" style={{ padding: 10}}>
            <Col>
                <Child deleteX={deleteY} fields={formValue2} onChange={(newFields) => {setFormValue2(newFields)}}/>
            </Col>
        </Row>
    )
}
export default Parent;

这是子组件：

//child.js
import React from 'react';
...
import TextEditorSimple from './texteditorsimple';

const Child = ({fields, onChange, deleteX}) => {
    <Row justify='start' align="top">
        <Col xs={24} style={{ padding: 10}}>
            <h2>Pengenalan & Langkah-langkah</h2>
            <Form 
                fields={fields}
                name="dynamic_form_nest_item" 
                onFinish={onFinish} 
                autoComplete="off"
                onFieldsChange={(_,allFields) =>{
                    onChange(allFields);
                }} >
                <Form.List name="tutorial" style={{ width: '100%'}}>
                    {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ index, key, name, fieldKey, ...restField }) => (
                        <div key={key}>
                            <Row>
                                {
                                    name === 0 ?
                                    <Col xs={24} style={{ padding: 5 }}>
                                        <Form.Item
                                        {...restField}
                                        label='Pengenalan'
                                        name={[name, 'pengenalan']}
                                        fieldKey={[fieldKey, 'pengenalan']}
                                        >
                                            <TextEditorSimple/>
                                        </Form.Item>
                                    </Col>
                                    :
                                    <Col xs={24} md={16} style={{ padding: 5 }}>
                                        <Form.Item
                                        {...restField}
                                        label={'Langkah '+ name}
                                        name={[name, 'langkah'+name]}
                                        fieldKey={[fieldKey, 'langkah'+name]}
                                        >
                                            <TextEditorSimple/>
                                        </Form.Item>
                                    </Col>
                                }
                                <Col xs={24} md={8} style={{ padding: 5 }}>
                                {
                                    name === 0 ?
                                    ''
                                    :
                                    <Space align="start">
                                        <Form.Item
                                        {...restField}
                                        name={[name, 'image'+name]}
                                        fieldKey={[fieldKey, 'image'+name]}
                                        valuePropName="fileList"
                                        getValueFromEvent={normFile}
                                        extra="Muat naik satu (1) imej/tangkap layar">
                                            <Upload 
                                                name="image" 
                                                customRequest={dummyRequest} 
                                                listType="picture-card" 
                                                maxCount={1} >
                                                {/* <Button icon={<UploadOutlined />}>Muat naik imej/ tangkap layar</Button> */}
                                                {uploadButton}
                                            </Upload>
                                        </Form.Item>
                                        <DeleteOutlined onClick={() => { remove(name); }} style={{ color: 'red'}}/>
                                    </Space>
                                }
                                </Col>
                            </Row>
                            <Divider/>
                        </div>
                        ))}
                        <Form.Item>
                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                Tambah Langkah
                            </Button>
                        </Form.Item>
                    </>
                    )}
                </Form.List>
            </Form>
        </Col>
    </Row>
}
export default Child;

我试图捕捉对Form.List“教程”（添加、删除）所做的更改，Child并将值提升到Parent该状态并将它们存储在状态中。但是删除不知何故并没有反映在 UI 中，因为应该删除的元素仍然保留在页面上。试图通过糟糕的编码deleteX和deleteY功能手动更改状态，但没有成功。

显示错误的 GIF 可以在这里查看：http: //www.giphy.com/gifs/HsIjHuckIflqOr3gOO

标签： javascriptreactjsformsantd