如何在处于react状态的数组中切换布尔值

Question

const [isShown,setIsShown]=React.useState([false,"Hide"])
function toggleIsShown(){
setIsShown(prev=>{
prev[0]=!prev[0]
return prev
})
}

由于我是一个初学反应的人，我无法理解改变状态的想法。这就是为什么我正在为上面的问题而挣扎。再次，当我按下某个按钮时，我想切换"0"的第一个元素；显示"；

Answer 1

您可以这样做：

function toggleIsShown(){
setIsShown([!isShown[0], isShown[1]]);
}

但总的来说，这一系列的价值观只会导致更多的混乱和问题。这两个价值观是否有关联？如果没有，请将它们分开：

const [isShown,setIsShown] = React.useState(false);
const [someText,setSomeText] = React.useState("Hide");

那么切换在语义上更简单：

function toggleIsShown(){
setIsShown(!isShown);
}

或者，如果这些值与相关，则创建一个语义上有意义的对象：

const [shownInfo,setShownInfo] = React.useState({ isShown: false, someText: "Hide" });

并按名称更新属性：

function toggleIsShown(){
setShownInfo({ ...shownInfo, isShown: !shownInfo.isShown });
}

重点是数组不是将随机值分组在一起的正确结构。数组应该表示某个特定事物的集合。这些值要么不相关(应该是单独的(，要么在它们的关系中具有某种语义(应该是具有命名属性的对象(。

Answer 2

复制状态，进行调整，并设置：

setIsShown(prev => {
const clone = [ ...prev ];
clone[0] = !clone[0];
return clone;
});

---

试试看：

const { useState } = React;
const Example = () => {
const [isShown,setIsShown] = useState([ false, "Hide" ])
function toggleIsShown(){
setIsShown(prev => {
const clone = [ ...prev ];
clone[0] = !clone[0];
return clone;
});
}

return (  
<div>
<button onClick={toggleIsShown}>Toggle</button>
{
(isShown[0])
? <em>Element is shown</em>
: null
}
</div>
)
}
ReactDOM.render(<Example />, document.getElementById("react"));

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