Next.js中数据变更时如何无需刷新页面更新内容？

你当前的问题核心是：调用删除接口仅修改了数据库，但没有同步更新前端状态，导致页面不会自动重新渲染。只需在删除请求成功后手动更新本地notesData状态，就能实现无刷新更新列表。

具体修改步骤： #

1. 更新删除函数，同步修改本地状态
   在deleteNote函数中，确认接口请求成功后，过滤掉被删除的笔记并更新状态：

   const deleteNote = async (noteTitle) => {
     const res = await fetch(`http://localhost:3000/api/${noteTitle}`, {
       method: "DELETE",
     });
     // 接口请求成功后再更新本地状态，避免网络异常时错误修改数据
     if (res.ok) {
       setNotesData(prevState => ({
         notes: prevState.notes.filter(note => note.title !== noteTitle)
       }));
     }
   };
   

2. 优化组件props接收与状态初始化
   解构传入的props让代码更清晰，同时确保状态初始化逻辑准确：

   export default function Home({ notes }) {
     const [notesData, setNotesData] = useState({ notes });
     // ... 其余代码
   }
   

3. 给列表项添加唯一key
   React列表渲染需要唯一key来优化DOM更新，避免控制台警告的同时提升性能：

   {notesData.notes.map((note) => {
     return (
       <div className="flex" key={note.title}>
         <p>{note.title}</p>
         <p onClick={() => deleteNote(note.title)}>Delete</p>
       </div>
     );
   })}
   

   如果你的笔记有唯一ID字段，用ID作为key比title更可靠

修改后的完整代码： #

export default function Home({ notes }) {
  const [notesData, setNotesData] = useState({ notes });

  const deleteNote = async (noteTitle) => {
    const res = await fetch(`http://localhost:3000/api/${noteTitle}`, {
      method: "DELETE",
    });
    if (res.ok) {
      setNotesData(prevState => ({
        notes: prevState.notes.filter(note => note.title !== noteTitle)
      }));
    }
  };

  return (
    <div>
      <h1>Notes:</h1>
      {notesData.notes.map((note) => {
        return (
          <div className="flex" key={note.title}>
            <p>{note.title}</p>
            <p onClick={() => deleteNote(note.title)}>Delete</p>
          </div>
        );
      })}
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch(`http://localhost:3000/api`);
  const { data } = await res.json();

  return { props: { notes: data } };
}

这样修改后，删除笔记时前端会立即更新列表内容，无需刷新页面。

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