React hooks - 当状态更改为相同值时如何强制 useEffect 运行？

Question

所以我正在构建一个鼓垫类型的应用程序，除了这个之外，几乎所有东西都可以正常工作。

编辑：如果有人想看看，请将整个内容放在代码和框上：codesandbox.io/s/sleepy-darwin-jc9b5?file=/src/App.js

const [index, setIndex] = useState(0);
const [text, setText] = useState("");
const [theSound] = useSound(drumBank[index].url)   

function playThis(num) {
  setIndex(num)
}

useEffect(()=>{
  if (index !== null) {
    setText(drumBank[index].id);
    theSound(index);
    console.log(index)
  }
}, [index])

当我按下一个按钮时，索引会更改为与该按钮关联的值，然后 useEffect 挂钩会从位于该 索引 的数组中播放声音。但是，当我多次按下同一个按钮时，它只会播放一次，因为当 index 更改为相同的值时，useState 不会重新渲染应用程序。

我希望能够多次按下同一个按钮并让应用重新渲染，因此每次按下按钮时都会运行 useEffect。谁能帮我怎么做？

Answer 1

您是否考虑过将这些离散状态变量（值类型）组合成一个引用类型的状态对象？

您只需同时设置整个状态，而不是在索引更改时设置文本。

只要确保这是一个新对象/引用，效果就会触发。然后效果器只负责根据当前状态播放声音。

这里有一些示例代码

const [state, setState] = useState({ index: 0, text: '', }); 
const playThis = (num) => { 
    setState({ index: num, text: drumBank[num].id, }); 
}; 
useEffect(() => { 
    theSound(state.index); 
}, [state]);

Answer 2

这是我可以从您的沙盒中得出的结果。

1. 根据文档，每个 useSound 只是一个声音，因此当尝试将索引更新到音库以通过 React 状态使用时，播放的声音将始终延迟至少一个渲染周期。我建议创建一个新的自定义挂钩来封装您的 9 种鼓声。

   useDrumBank 使用鼓组数组并将 9 个鼓声实例化为一个数组。

   const useDrumBank = (drumbank) => {
     const [drum0] = useSound(drumbank[0].url);
     const [drum1] = useSound(drumbank[1].url);
     const [drum2] = useSound(drumbank[2].url);
     const [drum3] = useSound(drumbank[3].url);
     const [drum4] = useSound(drumbank[4].url);
     const [drum5] = useSound(drumbank[5].url);
     const [drum6] = useSound(drumbank[6].url);
     const [drum7] = useSound(drumbank[7].url);
     const [drum8] = useSound(drumbank[8].url);
   
     return [drum0, drum1, drum2, drum3, drum4, drum5, drum6, drum7, drum8];
   };
   

2. 更新组件逻辑以将drumBank 数组传递给新的自定义挂钩。

   const sounds = useDrumBank(drumBank);
   

这是完整的代码：

function App() {
  useEffect(() => {
    document.addEventListener("keypress", key);

    return () => document.removeEventListener("keypress", key);
  }, []);

  const [text, setText] = useState("");
  const sounds = useDrumBank(drumBank);

  function playThis(index) {
    drumBank[index]?.id && setText(drumBank[index].id);
    sounds[index]();
  }

  function key(e) {
    const index = drumBank.findIndex((drum) => drum.keyTrigger === e.key);
    index !== -1 && playThis(index);
  }

  return (
    <div id="drum-machine" className="drumpad-container">
      <div id="display" className="drumpad-display">
        <p>{text}</p>
      </div>
      <button className="drum-pad" id="drum-pad-1" onClick={() => playThis(0)}>
        Q
      </button>
      <button className="drum-pad" id="drum-pad-2" onClick={() => playThis(1)}>
        W
      </button>
      <button className="drum-pad" id="drum-pad-3" onClick={() => playThis(2)}>
        E
      </button>
      <button className="drum-pad" id="drum-pad-4" onClick={() => playThis(3)}>
        A
      </button>
      <button className="drum-pad" id="drum-pad-5" onClick={() => playThis(4)}>
        S
      </button>
      <button className="drum-pad" id="drum-pad-6" onClick={() => playThis(5)}>
        D
      </button>
      <button className="drum-pad" id="drum-pad-7" onClick={() => playThis(6)}>
        Z
      </button>
      <button className="drum-pad" id="drum-pad-8" onClick={() => playThis(7)}>
        X
      </button>
      <button className="drum-pad" id="drum-pad-9" onClick={() => playThis(8)}>
        C
      </button>
    </div>
  );
}

演示

使用说明

No sounds immediately after load

为了用户着想，浏览器不允许网站发出声音 直到用户与他们互动（例如，通过点击 某物）。在用户点击、轻敲或 触发一些东西。

让按键持续工作似乎是一个问题，我没有立即想到解决方案，但至少此时按钮点击工作并且声音同步播放。