javascript - 如何在不重新渲染的情况下调用 useState react hook 的多个 setter 函数？

Question

我想在触发某些事件时同时调用多个 setter 函数。

某事像:

const [running, setRunning] = useState(false);
const [jumping, setJumping] = useState(true);

那如果我们想把setRunning和setJumping结合起来怎么办呢？ (避免重新渲染组件)

Answer 1

您可以像这样按顺序调用它们 (demo):

const Comp = ({ flag }) => {
  const [running, setRunning] = useState(false);
  const [jumping, setJumping] = useState(false);

  const setBoth = (_e) => {
    setRunning(true);
    setJumping(true);
  };
  
  return (
    <>
      {"running: " + running}
      {"jumping: " + jumping}
      <button onClick={setBoth}>setboth</button>
    </>
  );
};

---

或者，您可以像这样同时设置它们:

const Comp = ({ flag }) => {
  const [RJ, setRJ] = useState([false, false]);

  const setBoth = (_e) => {
    setRJ([true, true]);
  };

  return (
    <>
      {"running: " + RJ[0]}
      {"jumping: " + RJ[1]}
      <button onClick={setBoth}>setboth</button>
    </>
  );
};

https://codesandbox.io/s/0pwnm2z94w