如何实现React中state数组的永久更新，避免状态回退？

state短暂出现后回退是表单默认提交行为触发页面重载导致的：

• 放在<form>标签内的<button>如果未显式指定type属性，默认type值为submit
• 点击submit类型按钮会触发表单默认提交逻辑，浏览器会自动刷新当前页面，所有React组件的state都会被重置为初始值，因此你刚更新的details只会在页面刷新前短暂显示

任选以下任意一种方法即可解决：

方案1：阻止表单默认提交事件 #

修改updateDetails函数，接收事件参数并调用preventDefault()取消默认行为：

const updateDetails = (e) => {
  e.preventDefault()
  setDetails([username, password])
}

方案2：将按钮类型指定为普通按钮 #

给<button>显式设置type="button"，避免触发表单提交逻辑：

<button type="button" onClick={updateDetails}>Submit</button>

你当前直接将数组details放在<h1>中渲染，会被自动转为逗号拼接的字符串，如果你需要更清晰的展示效果，可以调整为：

<h1>用户名：{details[0]} 密码：{details[1]}</h1>

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