将多个 React 状态组合成一个变量答案

【问题标题】：Combining multiple React States into one variable将多个 React 状态组合成一个变量
【发布时间】：2020-05-27 16:22:11
【问题描述】：

我正在使用 React 开发一个项目，我可以使用 useState 钩子在屏幕上隐藏/显示多个元素。

示例

  const [nameLabel, setNameLabel] = useState(true);
  const [numberLabel, numberLabel] = useState(true);
  const [departure, setDeparture] = useState(true);
  const [arrival, setArrival] = useState(true);

我有大约 20 个这些布尔值，但现在我想创建一个变量，以便一次显示或隐藏所有这些布尔值。

是否可以将所有这些组合成一个变量，我可以调用它来一次显示或隐藏所有元素？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您可以使用布尔值创建对象并更新单个键。像

const [data, setData] = useState({
  nameLabel: true,
  numberLabel: true,
  departure: true,
  arrival: true
});

调用setData

setData({ ...data, nameLabel: false })

参考此链接codesandbox

【讨论】：

假设这些属性中的每一个都会影响不同的组件。一个属性的变化是否也会重新渲染其他属性的对应组件？

【解决方案2】：

如果我正确理解了你的问题，我认为你最好使用一个函数来一次切换它们（额外的all 状态是可选的。你可以使用任何你想要的逻辑，我只是用它来帮助说明）。

这使您可以像以前一样保持独立，但使用辅助函数可以一次更新所有内容。

const {useState} = React;

const Example = () => {
  const [all, toggle] = useState(false);
  
  const [nameLabel, setNameLabel] = useState(true);
  const [numberLabel, setNumberLabel] = useState(true);
  const [departure, setDeparture] = useState(true);
  const [arrival, setArrival] = useState(true);
  
  const toggleAll = (bool) => {
    setNameLabel(bool);
    setNumberLabel(bool);
    setDeparture(bool);
    setArrival(bool);
    
    toggle(!bool);
  }
   
  return (
    <div>
      <div>
        <button onClick={() => toggleAll(all)}>Toggle All</button>
      </div>
      <div>
        <button onClick={() => setNameLabel(!nameLabel)}>Name: {nameLabel.toString()}</button>
      </div>
      <div>
        <button onClick={() => setNumberLabel(!numberLabel)}>Number: {numberLabel.toString()}</button>
      </div>
      <div>
        <button onClick={() => setDeparture(!departure)}>Departure: {departure.toString()}</button>
      </div>
      <div>
        <button onClick={() => setArrival(!arrival)}>Arrival: {arrival.toString()}</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：