javascript - 当应用程序托管在 GitHub Pages 上时，React 会更新状态，但不会在 localhost（或 CodeSandbox）上更新状态

Question

我经历了一个非常奇怪的行为。这是我的反应应用程序：

import "./App.css";
import React, { useState, useEffect } from "react";

const buttonsObject = [
  {
    press: "q",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Clap%201.mp3",
    name: "",
  },
  {
    press: "w",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Clap%202.mp3",
    name: "",
  },
  {
    press: "e",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Conga%20High.mp3",
    name: "",
  },
  {
    press: "a",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Conga%20Mid.mp3",
    name: "",
  },
  {
    press: "s",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Conga%20Low.mp3",
    name: "",
  },
  {
    press: "d",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Cowbell.mp3",
    name: "",
  },
  {
    press: "z",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Hihat%20Open.mp3",
    name: "",
  },
  {
    press: "x",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Mid%20Tom.mp3",
    name: "",
  },
  {
    press: "c",
    source:
      "https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Pop%20Chord%201.mp3",
    name: "",
  },
];

//get raw file from github as source and set the name of each button
let nameRegEx = /.+\/(.*)\.mp3$/;
for (let i = 0; i < buttonsObject.length; i++) {
  buttonsObject[i].name = decodeURI(buttonsObject[i].source).match(
    nameRegEx
  )[1];
  buttonsObject[i].source = buttonsObject[i].source + "?raw=true";
}

const handleKeyPressWrapper = (setTextFunc) => {
  return (e) => {
    try {
      document.getElementById(e.key.toUpperCase()).currentTime = 0;
      document.getElementById(e.key.toUpperCase()).play();
      let name = "Loading";
      for (let i = 0; i < buttonsObject.length; i++) {
        if (buttonsObject[i].press === e.key) {
          name = buttonsObject[i].name;
          break;
        }
      }

      setTextFunc(name);
    } catch {}
  };
};

const dbHandleClickWrapper = (setTextFunc) => {
  return (e) => {
    const customkey = e.target.attributes.customkey.value;
    const button = buttonsObject[customkey];
    const id = button.press.toUpperCase();
    document.getElementById(id).currentTime = 0;
    document.getElementById(id).play();
    setTextFunc(button.name);
  };
};
const DrumButtons = (props) => {
  return (
    <div id="db-wrapper">
      {buttonsObject.map((elem, i) => {
        return (
          <div className="drum-button" key={i}>
            <button
              key={elem.press}
              className="drum-pad"
              customkey={i}
              onClick={dbHandleClickWrapper(props.changetext)}
              id={elem.name}
            >
              <span className="front">{elem.press.toUpperCase()}</span>
              <audio
                key={elem.press.toUpperCase()}
                id={elem.press.toUpperCase()}
                src={buttonsObject[i].source}
                className="clip"
              ></audio>
            </button>
          </div>
        );
      })}
    </div>
  );
};

const Display = (props) => {
  return (
    <div id="display">
      <div id="display-text">{props.text}</div>
    </div>
  );
};

let listenerAttached = false;
function App() {
  const [state, setState] = useState({ text: "Press a button" });
  useEffect(() => {
    console.log("useEffect", state);
  });
  const changeDisplayText = (text) => {
    console.log("state change function called", text);
    setState({ text: text });
    console.log("new state", state);
  };
  if (!listenerAttached) {
    document.addEventListener(
      "keydown",
      handleKeyPressWrapper(changeDisplayText)
    );
    listenerAttached = true;
  }
  return (
    <div className="App" id="drum-machine">
      <Display text={state.text} />
      <DrumButtons changetext={changeDisplayText} />
    </div>
  );
}

export default App;

当我单击一个按钮时，App 组件的状态会通过调用该changeDisplayText函数而改变。该useEffect函数将被调用，您可以在控制台中看到日志（并且显示文本会更改）。如果我按下键盘上的一个键，该changeDisplayText函数将被调用，但它不会改变状态并且该useEffect函数也不会被调用。

但是，如果我使用gh-pages和本教程创建同一应用程序的部署版本并将其托管在 GitHub Pages 上，它会奇迹般地工作，我不知道为什么。

这是存储库的链接：https ://github.com/Julian-Sz/FCC-Drum-Machine

这是 gh-pages 页面的链接：https ://julian-sz.github.io/FCC-Drum-Machine/

我已将存储库复制到 CodeSandbox 并查看 - 它不再工作。为什么它可以在 GitHub Pages 上运行，为什么不能在 localhost 上运行？

这是该 CodeSandbox 的链接：https ://codesandbox.io/s/fcc-drum-machine-from-github-tybqs

标签： javascriptreactjsweb-deploymentgithub-pages