useState状态不更新：新增数据库数据后页面未同步最新数据

云上老周

2026-7-30

问题：新增数据后拉取数据仍显示旧值的解决办法

核心问题是异步操作顺序错误——你在调用新增数据的异步函数时没等待它执行完成，就立刻发起查询请求，导致数据库还没完成写入，拉取到的自然是旧数据。

先看你的提交函数代码：

const submit = async (e) => {
    e.preventDefault();
    const code = e.target.elements['text'].value;

      try {
        addTextToDataBase(text); // 这里没加await，POST请求还在处理就执行后续代码
        console.log('text added to database');
        const response = await fetch(url);
        const data = await response.json();
        setDataFromDB(data);
        console.log(data);
      } catch (e) {
        console.log(e);
      }
  };

你的addCodeToDB是异步函数，必须用await等待它执行完毕，才能确保数据已经写入数据库，再去拉取最新数据。另外注意代码里的函数名不一致：submit里调用的是addTextToDataBase，但实际定义的函数是addCodeToDB，这个笔误也要修正。

修改后的提交函数：

const submit = async (e) => {
    e.preventDefault();
    const code = e.target.elements['text'].value;

      try {
        // 加await等待POST请求完成，同时修正函数名
        await addCodeToDB(code); 
        console.log('text added to database');
        const response = await fetch(url);
        const data = await response.json();
        setDataFromDB(data);
        console.log(data);
      } catch (e) {
        console.log(e);
      }
  };

额外补充两个检查点：