React中如何避免API请求后页面重载？

核心问题1：表单默认提交行为触发页面刷新 #

你的子组件中按钮设置了type="submit"，点击时会触发浏览器默认的表单提交逻辑，直接导致页面刷新。以下两种方法二选一即可解决：

方法A：修改按钮类型为非提交型

把子组件内Button组件的type="submit"改为type="button"：

<Button
  type="button"
  icon="pi pi-check"
  label="Confirm"
  className="border-noround"
  style={{ height: "40px" }}
  onClick={(e) => addDecision(e)}
/>

方法B：在点击事件中阻止默认行为

修改子组件的addDecision函数，接收事件参数并阻止浏览器默认提交行为：

const addDecision = (e) => {
  e.preventDefault();
  if (newDecision.trim() && !props.dataDecision.find(item => item.name === newDecision.trim())) {
    // 原有业务逻辑保持不变
  }
};

核心问题2：状态更新的格式错误 #

父组件joinNewDecision中，API返回的data已经是完整的新决策对象，当前代码用{ data }会将其嵌套为新对象，导致子组件下拉选项的数据结构异常，修改为：

function joinNewDecision(decision) {
  postDecision({ id: decision.id, name: decision.name }).then((data) => {
    setDecisions([...decisions, data]);
  });
}

手动修改JSON文件页面重载的问题 #

这是json-server默认的文件监听机制导致的——它会在JSON文件修改后自动重启服务，进而触发前端热重载。若要关闭该特性，修改package.json中的json启动命令，添加--no-reload参数：

"scripts": {
  "json": "json-server --watch db.json --port 5000 --no-reload"
}

关于是否转向Next.js #

完全没必要，这是React基础的表单事件处理与状态管理问题，和框架无关，解决上述问题后即可正常运行。

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