ReactJS中提交数据后需刷新页面才能看到更新的问题求助

问题原因 #

• 异步操作顺序错误：addTextToDB是异步函数，但handleSubmit中调用它时未使用await，导致POST请求还未完成就立即执行fetchDataFromDB，此时数据库还未写入新数据，拉取到的仍是旧数据。
• 冗余无效的状态更新：setDataFromDB(dataFromDB)完全多余，dataFromDB是当前状态的快照，该调用不会触发组件重新渲染，反而可能干扰正常状态更新逻辑。

解决方案 #

1. 修正异步操作顺序 #

在handleSubmit中等待addTextToDB完成后，再调用fetchDataFromDB，确保数据写入数据库后再拉取最新数据：

const handleSubmit = async (e) => {
  e.preventDefault();
  const input = e.target.elements.name.value;
  // 等待POST请求完成
  await addTextToDB(input);
  e.target.reset();
  // 拉取最新数据
  await fetchDataFromDB();
};

2. 移除无效状态更新代码 #

删除handleSubmit中的setDataFromDB(dataFromDB)，因为fetchDataFromDB内部已经会更新dataFromDB状态。

3. 可选优化：添加请求状态校验 #

在addTextToDB中检查响应状态，确保数据成功写入后再刷新列表，避免请求失败时无意义的刷新：

const addTextToDB = async (text) => {
  try {
    const response = await fetch('http://localhost:3001/api/codes', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        text: text,
      }),
    });
    // 校验请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
  } catch (error) {
    console.error('添加数据失败:', error);
  }
};

原理说明 #

通过await关键字强制异步操作按顺序执行，保证只有当新数据成功存入数据库后，才会触发数据拉取，此时获取到的就是包含新数据的最新列表，组件会自动重新渲染展示更新后的内容。

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