React动态添加与隐藏组件异常求助：隐藏逻辑失效或误操作

你的核心问题出在存储React元素到state、依赖数组索引作为标识这两个反模式上：

1. 直接把<MyInput>元素存在inputsFields中，导致React无法正确跟踪每个组件的状态，索引变化时出现匹配错误
2. 用数组的map索引作为标识（包括传给MyInput的index和渲染时的key），当元素被隐藏过滤后，后续元素的索引会偏移，造成误隐藏或无法隐藏

修复后的代码 #

import { MinusCircleOutlined } from '@ant-design/icons'
import { useState } from "react"
import { Form, Card, Input } from 'antd' // 补全缺失的组件导入

const MyInput = ({ id, removeInput }) => {
    return (
        <div>
            <Input placeholder="Email address" />
            <MinusCircleOutlined className="icon-left" onClick={() => removeInput(id)} />
        </div>
    )
}

const MyComponent = () => {
    const [form] = Form.useForm()
    const [nextId, setNextId] = useState(0)
    const [inputIds, setInputIds] = useState([]) // 存储唯一ID而非React元素
    const [hiddenFields, setHiddenFields] = useState(new Set()) // 用Set存隐藏的ID，查询更高效

    const addInput = () => {
        setInputIds([...inputIds, nextId])
        setNextId(nextId + 1)
    }

    const removeInput = (targetId) => {
        setHiddenFields(new Set([...hiddenFields, targetId]))
        // 如果需要彻底删除而非隐藏，可改用：setInputIds(inputIds.filter(id => id !== targetId))
    }

    return (
        <Card>
            <Form form={form} layout="vertical">
                <Form.Item className='form-item item-container'>
                    {inputIds.map(id => 
                        !hiddenFields.has(id) && (
                            <div key={id}> {/* 用唯一ID作为key */}
                                <MyInput id={id} removeInput={removeInput} />
                            </div>
                        )
                    )}
                </Form.Item>
                <Form.Item>
                    <a href="#" onClick={(e) => {
                        e.preventDefault() // 阻止默认跳转行为
                        addInput()
                    }}>Add</a>
                </Form.Item>
            </Form>
        </Card>
    )
}

关键修复点 #

• 存储数据而非元素：inputIds只存每个输入项的唯一ID，渲染时动态生成<MyInput>，让React能正确管理组件状态
• 用唯一ID替代索引：每个输入项用独立的id作为标识，避免数组索引变化导致的匹配错误
• 使用Set优化隐藏判断：hiddenFields改用Set结构，查询效率更高，操作也更简洁
• 修复跳转行为：给Add链接添加e.preventDefault()，避免点击时页面跳转

如果你需要的是彻底删除输入项而非隐藏，只需要把removeInput改成过滤inputIds数组即可：

const removeInput = (targetId) => {
    setInputIds(inputIds.filter(id => id !== targetId))
}

内容的提问来源于stack exchange，提问作者letters