How to call multi setter useState react hooks

Question

I want to call multi react hook setter function together, when some event been triggered Sth like :

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

then what should we do, if we want to setRunning and setJumping together? (avoid re-render component)

Answer 1

您可以按如下顺序依次调用它们（demo）：

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

  const setBoth = () => {
    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 = () => {
    setRJ([true, true]);
  };

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

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