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

Question

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

例

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

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

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

Answer 1

您可以使用布尔值创建一个对象并更新单个键。类似的东西

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

调用集数据

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

参考此链接代码沙盒

Answer 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>