时间戳

首页 > 解决方案 > 在反应中使用 XMLHttpRequest 正在刷新我的页面并重置我的状态

javascript - 在反应中使用 XMLHttpRequest 正在刷新我的页面并重置我的状态

问题描述

我正在制作一个基本的应用程序来学习 React。我有一些数据存储在一个 JSON 文件中，我正在使用json-loader. 但是我也想写入这个文件。我的后端有一个 python 脚本，它写入一个文件（我不相信这个脚本是问题，但如果需要我可以包含它）。

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

这是有问题的按钮：

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

和下一步（）：

  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
    }));
  }

JSON 文件确实被写入了正确的信息，我只需要取消页面重新加载，以便可以适当地更新状态并且用户可以在页面中前进。

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

谢谢！

标签： javascriptreactjs

解决方案

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

推荐阅读