JavaScript星标按钮问题：fetch修改important后本地值未更新

我尝试用JavaScript创建一个星标按钮，点击该按钮可将邮件添加至重要项列表。但点击按钮后，尽管已通过fetch请求将'important'字段设为true，打印email.important时却仍显示为false。请问我哪里操作出错了？

相关代码 #

const second_element = document.createElement('div')

second_element.innerHTML = `<div style="display: inline-block; width: 5%;"> <button style="background-color: ${read}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
    <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
    </svg> </button> </div>`;

second_element.addEventListener('click', function() {
    console.log("clicked")
    fetch(`/emails/${email.id}`, {
      method: 'PUT',
      body: JSON.stringify({
          important: true
      })
    })
    .then( () => { 
      console.log(email.important)
      load_mailbox('inbox')
    })
  })

document.querySelector('#container').append(second_element);

问题原因与解决办法 #

• 核心问题：你只更新了服务器端的邮件数据，但本地内存中的email对象并没有同步更新。Fetch请求只是把修改指令发送给服务器，服务器数据改变后，你手里的email还是原来的旧对象，所以打印出来的email.important依然是false。

• 解决方式：

  1. 手动更新本地对象：在fetch的回调里直接修改本地email的属性，这样打印时就能得到最新值：

     .then( () => { 
       email.important = true; // 同步更新本地对象
       console.log(email.important)
       load_mailbox('inbox')
     })
     

  2. 依赖重新加载数据：如果load_mailbox('inbox')会重新从服务器拉取最新的邮件列表，那其实不需要手动更新本地对象，只是你在调用load_mailbox之前打印了旧值。可以把打印语句移到load_mailbox执行之后，或者等页面重新渲染后查看数据。

• 额外建议：Fetch请求可能因为网络或服务器问题失败，最好加上错误处理逻辑，避免静默失败：

  .then( () => { 
    email.important = true;
    console.log(email.important)
    load_mailbox('inbox')
  })
  .catch(error => console.error('更新重要项失败:', error))
  

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