从数组中删除组件时，当存在多个组件时，应用程序崩溃

Question

我试图通过将会话添加到数组来动态添加和删除称为会话的反应组件。
我希望能够在按下删除会话按钮时从数组中删除最后一个会话，但是，似乎如果我在页面上呈现多个会话，那么当我按下删除会话按钮时，它会完全重置页面。

这是我的程序组件中存在的代码

const 程序 = () =>{ const [会话，setSessions] = useState([]);

const addSessions = () => {
    const newSession = <Session key={generateKey()} />;
    setSessions(prevSessions => [...prevSessions, newSession]);
   
};

const deleteLastSessions = () => {
    if (sessions.length > 0) {
            setSessions(prevSessions => prevSessions.slice(0, -1));
    }
};

const generateKey = () => {
    return uuidv4(); 
};

const AddSessions = () => {
    return (
        <button className="addsessions" onClick={addSessions}>
            Add Session
        </button>
    );
};
return(
<form>
    <input type="text" placeholder="Program Name"></input>
    {sessions.map((SessionsComponent) => 
            <React.Fragment key={generateKey()}>{SessionsComponent}</React.Fragment>
        )}
        <AddSessions />
        {sessions.length > 0 && ( 
            <button className="deleteSessionsButton" onClick={deleteLastSessions}>
                Delete Last Session
            </button>
        )}
    <SaveProg />
</form>
);

};

有一段时间我以为是钥匙的问题。起初我根据索引创建了它们。然后我尝试使用计数器，现在我只使用 UUID，但是，这显然不是问题。我仍在学习，所以我确信这里存在一些根本性的误解。我只是希望有人能看看这个并告诉我我对 React 和 js 的误解。

Answer 1

里面有一个

form

和一个

button

，问题是这个没有“类型”的

button

有一个默认的“类型”，在大多数现代浏览器中是“提交”。所以您的表单基本上已提交并且页面已重新加载。

要修复 - 只需指定按钮的“类型”：

<button
  type="button"
  className="deleteSessionsButton"
  onClick={deleteLastSessions}
>
  Delete Last Session
</button>