JS存储对象数组切换用户输入 来回导航数据不显示问题排查

你的代码存在以下几个核心问题，导致切换时数据无法正确展示：

• 缺少当前活跃用户索引的全局状态变量，切换上一步/下一步时不知道要加载用户数组中对应位置的用户数据
• displayUser 方法逻辑错误：不管传入的id是什么，都会遍历整个用户数组覆盖表单值，最终只会展示数组最后一个用户的信息，完全没有按id筛选的逻辑
• 上一步/下一步按钮的点击事件只修改了标题和按钮显示状态，没有关联用户数据加载的逻辑，切换时表单内容自然不会更新
• addUser 逻辑存在bug：当数组已有用户（也就是提交用户B的信息时），会先把用户A的信息回填到表单，再push新用户，导致用户B的输入内容被覆盖，存储的数据本身就是错误的
• 两个按钮都是submit类型，点击任意按钮都会触发表单提交事件，逻辑互相干扰，无法区分是切换操作还是保存操作
• 没有区分「保存用户输入」和「切换用户展示」两个场景的逻辑，现在的提交事件判断条件完全无法适配切换操作的需求

JS部分 #

const showModal = document.querySelector("#showModal");
const modal = document.querySelector(".modal");
const nextBtn = document.querySelector("#next-btn");
const prevBtn = document.querySelector("#prev-btn");
let userText = document.querySelector(".user-text");
const mainForm = document.querySelector("#mainForm");
const fnameValue = document.querySelector("#fname");
const lnameValue = document.querySelector("#lname");
const idValue = document.querySelector("#idValue");

// 新增当前活跃用户索引，0=用户A，1=用户B
let currentUserIndex = 0;

showModal.addEventListener("click", e => {
  modal.setAttribute("style", "display:block");
});

class User {
  constructor() {
    this.userArrHolder = [];
  }
  addUser(id, fname, lname) {
    const newAddedUser = {
      id: id,
      fname: fname,
      lname: lname,
    };
    this.userArrHolder.push(newAddedUser);
  }
  // 按索引获取用户信息
  getUserByIndex(index) {
    return this.userArrHolder[index] || {id: '', fname: '', lname: ''};
  }
  // 更新已有用户信息
  updateUser(index, fname, lname) {
    if(this.userArrHolder[index]) {
      this.userArrHolder[index].fname = fname;
      this.userArrHolder[index].lname = lname;
    }
  }
}

const newUser = new User();

// 切换用户时加载对应数据的公共方法
function loadUserInfo(index) {
  const user = newUser.getUserByIndex(index);
  idValue.value = user.id;
  fnameValue.value = user.fname;
  lnameValue.value = user.lname;
  userText.textContent = index === 0 ? "User A" : "User B";
  prevBtn.style.display = index === 0 ? "none" : "inline-block";
  currentUserIndex = index;
}

// 上一步按钮逻辑
prevBtn.addEventListener("click", e => {
  e.preventDefault();
  // 先保存当前用户的修改
  newUser.updateUser(currentUserIndex, fnameValue.value, lnameValue.value);
  // 加载上一个用户
  loadUserInfo(currentUserIndex - 1);
});

// 下一步按钮逻辑
nextBtn.addEventListener("click", e => {
  e.preventDefault();
  // 先保存当前用户的修改
  if(newUser.getUserByIndex(currentUserIndex).id) {
    newUser.updateUser(currentUserIndex, fnameValue.value, lnameValue.value);
  } else {
    // 新用户则新增
    const id = Math.floor(Math.random() * 10000);
    newUser.addUser(id, fnameValue.value, lnameValue.value);
  }
  // 如果是用户A，切到用户B
  if(currentUserIndex === 0) {
    loadUserInfo(1);
  }
});

HTML修改点 #

把两个按钮的type从submit改成button，避免误触表单默认提交逻辑：

<button
  type="button"
  id="prev-btn"
  class="pr"
  style="display: none"
>
  Prev
</button>
<button type="button" id="next-btn">Next</button>

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