React更新json server数据后返回首页state不更新，仅刷新页面才生效

• 首页Notes组件的useEffect依赖为空数组，仅会在组件首次挂载时执行一次拉取数据逻辑。你通过history.push("/")返回首页时，首页组件并未销毁重建，因此useEffect不会重新触发，也就不会拉取服务端最新数据。
• 你在handleSubmit中调用异步的updateNote方法时没有等待请求完成就直接跳转首页，存在服务端还没完成数据更新，首页就已经执行完旧数据拉取的时序问题。
• 部分浏览器会默认缓存GET请求的响应，就算你重新发起拉取请求也可能直接返回本地缓存的旧数据。

1. 修改首页拉取逻辑，路由返回时重新拉取数据 #

修改Note.js (HomeScreen)，引入useLocation监听路由变化，每次回到首页时自动触发数据拉取：

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom"; // 新增导入
import Listitem from "../components/Listitem";

const Notes = () => {
  let [notes, setNotes] = useState([]);
  const location = useLocation(); // 新增获取路由实例

  useEffect(() => {
    getNotes();
  }, [location.pathname]); // 依赖改为路由路径，路径变化就重新拉取

  let getNotes = async () => {
      // 新增cache配置禁止缓存
      let response = await fetch("http://127.0.0.1:5000/notes/", {cache: "no-store"});
      let data = await response.json();
      setNotes(data);
    };

  return (
    <div className="notes">
      <div className="notes-header">
        <h2 className="notes-title">&#9782; Notes</h2>
        <p className="notes-count">{notes.length}</p>
      </div>

      <div className="notes-list">
        {/* 建议把key从index改成note.id，避免列表重渲染异常 */}
        {notes.map((note) => (
          <Listitem key={note.id} note={note} />
        ))}
      </div>
    </div>
  );
};

export default Notes;

2. 修复提交跳转的时序问题 #

修改NotePage.js中的handleSubmit方法，等待更新请求完成后再跳转首页：

// 把handleSubmit改为异步方法
let handleSubmit = async () => {
  await updateNote(); // 等待更新请求完成
  history.push("/");
};

可选优化 #

如果你的项目后续复杂度提升，可以引入React Query、SWR等数据请求库，自动处理缓存、数据刷新、重发等逻辑，不需要手动管理拉取时机。

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