ReactJS获取触发页面重新加载

问题描述

我对ReactJS相当陌生，并完成了几个项目，但是我现在遇到了一个新项目的问题，这是我之前从未见过的。

我有一个按钮，该按钮会触发一个onClick事件以将一些数据作为AJAX请求发布到API，但是某些事情触发了页面刷新，我不知道它是什么。

下面是我的按钮：

<input
  style={{ width: 70 + "%",marginLeft: "auto",marginRight: "auto" }}
  type="text"
  className="form-control"
  placeholder="someone@example.com"
  onChange={(e) => setEmail(e.target.value)}
/>
<button
  style={{ marginTop: 20 }}
  type="button"
  onClick={submitUserInterest}
  className="btn btn-primary"
  >
  Register Your Interest
</button>

我的submitUserInterest是s：

const submitUserInterest = (event) => {
  console.log("Submit event");
  console.log(event);
  event.preventDefault();
  event.stopPropagation();
  const postArray: any = {
    email: email,};

  api.sendRequest(postArray).then(function (result: any) {
    if (result.result === 0) {
      //setShowConfirmModal(true);
    }
  });
};

sendRequest方法如下所示：

export const sendRequest = (postArray) => {
  return new Promise(function (resolve,reject) {
    let url = "";

    const env = process.env.NODE_ENV;

    if (env === "production") {
      url = "/private/";
    } else {
      const host = window.location.host.substr(
        0,window.location.host.indexOf(":")
      );
      url = "http://" + host + "/private/";
    }

    const formData = new FormData();

    for (const name in postArray) {
      formData.append(name,postArray[name]);
    }

    fetch(url + "/service.PHP",{
      method: "post",body: formData,credentials: "include",}).then(function (response) {
      if (response.status !== 200) {
        alert("Something went wrong. Status Code: " + response.status);
        reject(response);
        return;
      }

      response
        .json()
        .then(function (data) {
          resolve(data);
        })
        .catch(function (err) {
          console.error("Caught Error: " + err);
          reject(err);
        });
    });
  });
};

如果我取消对api.sendRequest的调用，则不会发生页面刷新，但是sendRequest方法中的某些事件会触发页面刷新，但是当页面刷新时，我还在控制台中看到以下错误以前没见过：

警告：出于性能原因，此综合事件被重用。如果您看到的是，您正在访问方法movementX 已发布/无效的合成事件。这是一项无操作功能。如果你必须保留原始的合成事件，使用event.persist（）。有关更多信息，请参见已删除，因此SO将不接受短链接的链接。

解决方法

尽管我不知道是什么触发了这一点，但我设法弄清楚了。

我发布的PHP脚本托管在reactjs项目中，因此它是reactProject/public/private/service.php

PHP所在的私有目录与reactjs放置index.html和favicon等的目录相同。

我设置了Apache，因此reactProject / public是文档的根目录，因此react项目可以发布到/private/service.php及其引起重新加载的页面。

我已经将PHP放置在react项目之外的完全独立的Web目录中，并设置apache来代替它作为文档根目录，并更改了react项目中的URL指向该位置，现在它可以正常工作了没有页面刷新。

我不知道为什么发布到react项目目录中的php脚本会导致页面重新加载

ajax javascript reactjs reactjs