Javascript 在react中使用XMLHttpRequest正在刷新我的页面并重置我的状态

我正在做一个基本的应用程序来学习反应。我将一些数据存储在一个JSON文件中，我正在使用

JSON加载程序

读取该文件。不过，我也想写入此文件。我的后端有一个python脚本，可以写入文件（我不认为这个脚本有问题，但如果需要的话，我可以包含它）

当用户单击“下一步”按钮时，我试图向后端发送更新json文件的请求。问题在于，每当单击按钮时，页面就会刷新，状态也会重置，这意味着用户无法在站点中前进

这是有问题的按钮：

<button type="button" className="btn btn-info" id="continue_btn" onClick={() => nextStep()}>
     Continue
</button>

和updateStep（）：

JSON文件确实会使用正确的信息写入，我只需要取消页面重新加载，以便可以适当地更新状态，并且用户可以继续浏览页面

如果需要，我很乐意提供任何其他信息

---

谢谢大家!

当您更新json文件时，会触发HMR，因为您在代码中导入文件，而不是从服务器获取文件

按钮是否在

表单

元素中？为什么不使用

fetch

？@Nico它不在表单元素中。我尝试使用fetch并得到了完全相同的结果。尝试

onClick={（e）=>nextStep（e）}>

然后

e.preventDefault（）

内部

nextStep（）

@Nico刚刚尝试了相同的结果，不幸的是。我如何解决这个问题？我尝试使用useffect（）将json文件设置为从服务器返回的json文件发出get请求，但页面仍会刷新。@JohnnyLeek您是否仍在代码中导入json文件？像这样

从'file.json'导入数据

我刚刚卸载了json加载程序并删除了导入json的所有实例，它仍然在刷新。我相信你的答案是正确的，因为当我构建应用程序并将其推送到服务器时，它似乎没有刷新页面，但我仍然想找出是什么原因导致热加载程序在此处刷新。更新，无论出于何种原因，热加载程序在过去5分钟内实际上没有刷新我的应用程序？停止并运行npm run start似乎已修复该问题。非常感谢。

  const nextStep = () => {
    if (step + 1 > progress[props.tutorial]["total-steps"])
      return;
    else {
      updateStep();
      setStep(step + 1);
    }
  };

  const updateStep = () => {
    let request = new XMLHttpRequest();
    request.open("POST", `http://localhost:8000/store_progress/${props.page}/`, true);
    request.setRequestHeader('Content-Type', 'application/json');
    request.send(JSON.stringify({
      "progress": step + 1
    }));
  }