如何调用多设置器 useState 反应钩子答案

【问题标题】：How to call multi setter useState react hooks如何调用多设置器 useState 反应钩子
【发布时间】：2019-03-12 20:19:03
【问题描述】：

当某些事件被触发时，我想一起调用 multi react hook setter 函数某事喜欢：

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

如果我们想setRunning 和setJumping 在一起，我们应该怎么做？（避免重新渲染组件）

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案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

【讨论】：

这样组件会re-render两次，我不想要。
它不会重新渲染两次，多个状态更改由 React 批处理。

【解决方案2】：

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

最好的方法是创建一个带有两个键（明确地说）的 POJO，一个用于跑步，一个用于跳跃。然后，setter 将有 3 个排列。

设置只是跳跃
设置刚刚运行
同时设置

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

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

【讨论】：