如何减少模态使用 useState 的次数？

Question

我有一个关于在一个 useState 中使用多个状态的问题。我有两个按钮（大约 10 个），单击按钮后，它会显示一些典型信息，仅适用于一个按钮（选择）。所以每个按钮的状态必须是单独的。有什么方法可以将所有按钮减少到一个 useState 吗？我现在有：  const [showConfirmModalGoals, setShowConfirmModalGoals] = useState(false);  const [showConfirmModalBallPos, setShowConfirmModalBallPos] = useState(false);    const showModalForGoals = () => {    setShowConfirmModalGoals(true);  };    const hideModalForGoals = () => {    setShowConfirmModalGoals(false);  };  const showModalForBallPos = () => {    setShowConfirmModalBallPos(true);  };    const hideModalForBallPos = () => {    setShowConfirmModalBallPos(false);  };return(<Modal show={showConfirmModalGoals} ... > GOALS </Modal><Button onClick={showModalForGoals} /><Modal show={showConfirmModalBallPos} ... > Ball position</Modal><Button onClick={showModalForBallPos} />);所以如果我要 10 个不同内容的按钮，我需要这些按钮有 10 个不同的状态。

Answer 1

不！所有按钮只需要一个模式。

const [showModal, setShowModal] = useState(false);

然后，对于每个按钮：

<Button onClick={() => setShowModal(true)} />

然后您将根据单击的按钮更改模态框的内容（页眉、正文和页脚）。

Answer 2

您可以为所有状态使用一个对象。

const [showConfirmModals, setShowConfirmModals] = useState({

  showConfirmModalGoals: false,

  showConfirmModalBallPos: false,

});

// ...

setShowConfirmModals({

  ...showConfirmModals,

  showConfirmModalGoals: true

})