如何从 React 中渲染的列表中正确删除输入文件元素？

Question

在我的反应项目中，用户有一个“添加”按钮，单击它时会出现新的输入字段（1 用于文本输入，其他用于文件输入）。用户添加一些输入字段并选择其中的文件后，他可以通过单击删除按钮来删除元素。 但是删除后，输入文本字段被正确删除并重新排序，但输入文件字段保留以前的值。

如果用户单击第一行上的删除按钮：

请注意，第一个文本字段已正确删除，但输入文件字段未正确设置，而是最后一个被删除。我该如何解决这个问题。

const [fileuploadFields,setFileuploadFields] = useState([
    {type: '', file: ''},
]);
const addFields = () => {
    let object = {
        type: '',
        file: ''
    }

    setFileuploadFields([...fileuploadFields, object]);
}

并在组件 div 中：

<div>
            <div className="mb-1">
                <Label text="Upload Attachment" />
            </div>
            {fileuploadFields.map((form, index) => {
                return (
                    <div className="flex mb-2" key={index}>
                        
                        <input 
                        name="type"
                        placeholder="File type (e.g: SLA)"
                        onChange={event => handleFileTypeTextChange(event, index)}
                        value={form.type}
                        required
                        />

                        <input 
                        name="file"
                        onChange={event => handleFileChange(event, index)}
                        type="file"
                        required
                        />
                {fileuploadFields.length>1 && 
                            (<button 
                                className="ml-2" type="button"
                                onClick={() => removeField(index)}
                            >
                                <FaMinusCircle className="text-primary" title="Remove"></FaMinusCircle>
                            </button>)
                        }

移除方法

       const removeField = (index) => {
        console.log(index);
        let data = [...fileuploadFields];
        data.splice(index,1);
        setFileuploadFields(data);
}

请帮忙，我该如何解决这个问题。

Answer 1

正如@cmgchess建议的那样，在渲染列表中设置唯一的键值已经解决了问题，而不是索引作为键。 首先更新的列表设置如下：

const [fileuploadFields,setFileuploadFields] = useState([
        {id: uuidv4(), type: '', file: null},
]);

添加额外字段的方法：

const addFields = () => {
        let object = {
            id: uuidv4(),
            type: '',
            file: null
        }

        setFileuploadFields([...fileuploadFields, object]);
    }

渲染后的组件是：

{fileuploadFields.map((form) => {
            return (
                <div className="flex mb-2" key={form.id}>
                    
                    <input
                    name="type"
                    placeholder="File type (e.g: SLA)"
                    onChange={event => handleFileTypeTextChange(event, form.id)}
                    value={form.type}
                    required
                    />

                    <input
                    name="file"
                    onChange={event => handleFileChange(event, form.id)}
                    type="file"
                    required
                    />
                    
                    {fileuploadFields.length>1 && 
                        (<button 
                            className="ml-2" type="button"
                            onClick={() => removeField(form.id)}
                        >
                            <FaMinusCircle className="text-primary" title="Remove"></FaMinusCircle>
                        </button>)
                    }
                </div>
            )
        })}

form.id 设置为 key，在 fileuploadFields 列表中设置。