如何调用 multi setter useState 反应挂钩

Question

我想在触发某些事件时一起调用 multi react hook 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 = () => {
    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

Answer 2

这是一个很好的问题，因为它挑战了为每个状态切片设置 setState 的最佳实践。

最好的方法是创建一个带有两个键（显式）的 POJO，一个用于运行，一个用于跳转。然后，setter 将有 3 个排列。

设置为跳跃
仅设置运行
设置两者

const [actions, setActions] = useState({running: false, jumping: false});
const { jumping, running } = actions;

我认为这不是最佳做法，您应该尽可能将它们分开以避免这种模式。但是，这是一个可能值得将它们合并以保存渲染的实例（这可能是可取的）。

如何调用 multi setter useState 反应挂钩

How to call multi setter useState react hooks

javascript

reactjs

react-hooks