React笔记应用如何实现先执行updateNote再调用getNotes同步数据

架构老林

2026-10-4

问题根源

updateNote是异步方法，当前代码调用updateNote后没有等待请求完成就直接执行了history.push("/")跳转到列表页，导致更新请求还没落地，列表页就已经发起了拉取笔记的请求，所以拿到的还是旧数据，日志也会先打印getNotes的记录再打印updateNote的记录。
列表页NotesPage的拉取逻辑只在组件首次挂载时执行一次，如果从详情页跳转回列表页时列表页组件没有销毁重挂载，就不会重新拉取最新数据。

修改方案

1. 调整NotePage的提交逻辑，等待异步操作完成后再跳转

把handeSubmit改成异步方法，所有增删改请求前加await等待请求完成：

// NotePage.js 中修改handeSubmit方法
const handeSubmit = async () => {
  if (noteId !== "new" && !note.body) {
    await deleteNote();
  } else if (noteId !== "new") {
    await updateNote();
  } else if (noteId === 'new' && note !== null) {
    await createNote()
  }
  // 所有异步操作完成后再跳转
  history.push("/");
};

2. 调整NotesPage的拉取逻辑，每次进入列表页都重新拉取数据

给NotesPage的useEffect添加路径依赖，每次路径回到列表页根路径时就触发拉取：

// NotesPage.js 顶部先导入useLocation
import { useLocation } from 'react-router-dom'

const NotesPage = () => {
  const [notes, setNotes] = useState([]);
  const location = useLocation()
  
  // 替换原来的空依赖useEffect
  useEffect(() => {
    // 只在进入列表页时拉取数据
    if(location.pathname === '/') {
      getNotes();
      console.log('Log from getNotes');
    }
  }, [location.pathname])

  const getNotes = async () => {
    const response = await fetch("http://localhost:5000/notes");
    const data = await response.json()
    setNotes(data)
  }
  // 其余原有逻辑保持不变
}