React函数组件更新状态后如何重新渲染页面？POST请求后数据不刷新怎么解决

问题根因 #

• 当前useEffect为空依赖，仅页面首次渲染时执行一次GET请求，POST提交成功后没有触发机制重新拉取数据
• 若直接将请求返回的数组状态放到useEffect依赖中，数组为引用类型，每次setState都会生成新的数组引用，会触发useEffect反复执行，陷入「请求→更新状态→再请求」的死循环

最优修复方案（子组件POST成功后触发父组件拉取） #

步骤1：父组件抽离GET请求逻辑，新增刷新触发器 #

将GET请求逻辑抽为独立可复用函数，新增简单类型的刷新触发器代替数组作为useEffect依赖，避免死循环：

const [folderList, setFolderList] = useState([]);
// 用布尔值/数字作为刷新触发器，简单类型值变更才会触发useEffect重执行
const [refreshTrigger, setRefreshTrigger] = useState(false);

// 抽离GET请求逻辑
const fetchFolders = () => {
  const token = isAuthenticated().token;
  const projectId = props.match.params.projectId;
 
  getMirFolderbyProject(token, projectId).then((data) => {
    if (data.error) {
      console.log(data.error);
    } else {
      setFolderList(data);
    }
  });
}

// 依赖改为刷新触发器
useEffect(() => {
  fetchFolders();
}, [refreshTrigger]);

步骤2：父组件给子组件传递成功回调 #

在父组件引用POST子组件的位置，传递触发刷新的回调函数：

// 父组件渲染子组件时添加属性
<AddFolderComponent onAddSuccess={() => setRefreshTrigger(prev => !prev)} />

步骤3：子组件POST成功后调用回调 #

修改子组件的addFolder方法，POST请求成功后调用父组件传入的回调，触发数据刷新：

const addFolder = async() => {
  if (!folderName) {
    alert("Folder Name Required");
    return
  }
  try {
    const projectId = props.match.params.projectId
    const res = await fetch(`http://localhost:8080/mirFolder/new/${projectId}`,{
      method:"POST",
      body: JSON.stringify({
        title: folderName,
      }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
    })
    await res.json()
    // 提交成功后触发父组件刷新
    props.onAddSuccess()
  } catch(err) {
    console.log(err)
  }
}

性能优化方案（无需额外发起GET请求） #

如果你的POST接口会返回新增成功的文件夹数据，可以直接把新数据同步到父组件状态，省去一次GET请求：

1. 父组件传递的回调改为接收新数据：

<AddFolderComponent onAddSuccess={(newFolder) => setFolderList(prev => [...prev, newFolder])} />

2. 子组件POST成功后把接口返回的新文件夹数据传入回调即可：

const newFolder = await res.json()
props.onAddSuccess(newFolder)

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