NextJs/React表单删除组件时误删后续组件问题求助

核心问题1：removeNode函数的状态更新错误 #

你的removeNode函数存在两个关键错误：

• 错误使用了外部的cmdNodes变量，而非函数式更新提供的最新nodes参数，导致过滤时依赖的是旧状态，引发错误的删除逻辑
• 函数末尾多了一个多余的);，属于语法错误

核心问题2：直接在state中存储React元素（非最佳实践） #

你当前把<CmdNode>组件实例存在state里，不符合React状态管理规范。正确的做法是存储数据对象，再通过渲染函数动态生成组件，这种方式更易维护，还能避免状态同步问题。

修复后的代码 #

父组件（CmdBuilder） #

export default function CmdBuilder() {
  // 存储数据对象而非React元素
  const [cmdNodes, setCmdNodes] = React.useState([]);

  function addRow() {
    const uniqueId = new Date().getTime();
    // 添加数据对象，包含唯一ID
    setCmdNodes(prevNodes => [...prevNodes, { id: uniqueId }]);
  }

  function removeNode(id) {
    // 使用函数式更新，确保拿到最新的state
    setCmdNodes(prevNodes => prevNodes.filter(node => node.id !== id));
  }

  return (
    <div id='cmdBuilder'>
      {/* 动态渲染组件，用数据里的id作为key和uniqueId */}
      {cmdNodes.map(node => (
        <CmdNode 
          key={node.id} 
          uniqueId={node.id} 
          onRemove={removeNode} 
        />
      ))}
      <button onClick={addRow}>Add Row</button>
    </div>
  )
}

子组件（CmdNode） #

export default function CmdNode(props) {
  return (
    <div className={styles.builderGroup} id={props.uniqueId}>
      <input type='text' className={styles.cmdText} />
      <button className={styles.cmdDelete} onClick={() => props.onRemove(props.uniqueId)}>Delete</button>
    </div>
  )
}

额外说明 #

1. 唯一ID生成：new Date().getTime()在极端场景下（如极短时间内连续点击添加）可能出现重复，推荐使用更可靠的生成方式，比如crypto.randomUUID()（现代浏览器支持）或第三方库如uuid。
2. 函数式更新：当更新依赖于前一次状态的state时，必须使用函数式更新（setState(prevState => ...)），确保拿到最新的状态值，避免闭包陷阱。

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