React动态增删Session组件时，多组件存在删除触发页面重置问题

核心问题：表单默认提交行为导致页面刷新 #

你的Delete按钮和Add按钮都在<form>标签内部，HTML中form内的按钮默认类型是submit，点击时会触发表单提交，浏览器默认会刷新页面——这就是你看到页面完全重置的原因，和key无关。

React概念误区：state不应直接存JSX元素 #

你把<Session />组件直接存在useState数组里，这不是React推荐的做法。React的state应该存储数据（比如id、配置项等），而不是已经渲染好的JSX元素。直接存JSX会让状态管理变复杂，也容易引发不必要的重渲染问题。

修复后的代码 #

const Program = () => {
  const [sessionIds, setSessionIds] = useState([]);

  const addSession = () => {
    // 存id而非JSX组件
    setSessionIds(prev => [...prev, uuidv4()]);
  };

  const deleteLastSession = () => {
    if (sessionIds.length > 0) {
      setSessionIds(prev => prev.slice(0, -1));
    }
  };

  const AddSessions = () => {
    return (
      // 明确指定type="button"，避免触发表单提交
      <button type="button" className="addsessions" onClick={addSession}>
        Add Session
      </button>
    );
  };

  return (
    <form>
      <input type="text" placeholder="Program Name"></input>
      {/* 遍历id数组渲染Session组件，用id作为key */}
      {sessionIds.map(id => (
        <Session key={id} />
      ))}
      <AddSessions />
      {sessionIds.length > 0 && (
        // 同样指定type="button"
        <button 
          type="button" 
          className="deleteSessionsButton" 
          onClick={deleteLastSession}
        >
          Delete Last Session
        </button>
      )}
      <SaveProg />
    </form>
  );
};

关键修改点说明 #

• 给所有form内的按钮加上type="button"，彻底阻止表单默认提交行为。
• 将state从存JSX组件改为存session的id数组，渲染时通过id生成组件，符合React状态管理的最佳实践。
• 直接用数组中的id作为Session组件的key，避免了之前在map里重复生成key的问题（每次渲染生成新key会引发组件不必要的卸载和重建）。

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