useState更新中的多个值，对一个更改做出反应，更改所有剩余值

Question

我在.上使用了一系列数据元素

const [a, setA] = useState(true);
const [b, setB] = useState(false);
const [c, setC] = useState(false);
const [d, setD] = useState(false);

我使用了一个映射来循环浏览所有这四个，并使用函数changeOnClick单击即可更改它们。该函数基本上反转当前值，并将所有其他useStates的值设置为false。函数看起来像(approach A(:

const changeOnClick = (x) => {
switch (x) {
case "a":
setA(!a);
setB(false);
setC(false);
setD(false);
break;
case "b":
setB(!b);
setA(false);
setC(false);
setD(false);
break;
.
.

default:
break;
}
}

我已经尝试使用这4个值作为useState对象(approach B(，即

const [all, setAll] = useState({
a: true, 
b: false, 
c: false, 
d: false
}); 

但我无法找到使用CCD_ 5函数的方法。它显然适用于approach A，但我想学习一种新的方法来使用/使代码看起来简洁。非常感谢您的帮助。

Answer 1

使用useState() 更新对象的方法之一是调用prevState(以前的状态(、spread和(... prevState)，并更改您希望在setter函数中的属性，如

setAll((prevState) => ({
...prevState,
a : !prevState.a, // or false 
}));

---

基于代码的更详细用法

const [all, setAll] = useState({
a: true, 
b: false, 
c: false, 
d: false
}); 

const changeOnClick = (x) => {
switch (x) {
case "a": setAll((prevState) => ({
...prevState,
a : !prevState.a, // or false 
}));
break;
case "b": setAll((prevState) => ({
...prevState,
b : !prevState.b, // or false  as you wiss
}));
break;
...
})

Answer 2

如果只允许其中一个状态为true，那么可以使用单个状态并记录哪个功能是活动的。例如setState('a'(或setState('b'(。

我想你想要的是使用curried函数。很抱歉，如果有语法错误，请键入以下内容：

<button onClick={updateState('a')}>AAA</button>
<button onClick={updateState('b')}>BBB</button>
<button onClick={updateState('c')}>CCC</button>
<button onClick={updateState('d')}>DDD</button>
const updateState = (whichState) => (event) => {
console.log('whichState', whichState)
console.log('event', event)
// your code here...
}

Answer 3

我可以建议的一种方法是在处理程序本身中创建一个伪对象。

const clonedAll = {
a: false,
b: false,
c: false,
d: false,
};

之后，在处理程序中，当您传递值x时，它就是键本身。修改setState，取消对象的结构并将值true添加到键本身。

setAll({
...clonedAll,
[x]: true,
});

还要为x指定一个默认值，使默认值为true。

Answer 4

不要这样更改状态：

setA(!a);

但是像这样：

setA((prevState) => !prevState)

尝试阅读关于useReducer

Answer 5

那么你可能应该读一本Lil More的书而不是问。但这里有一个选项

...
const [data, setData]=useState({});
...
const changeHandler = e => {
const name = e.target.getAttribute("name");
const value = e.target.value;
setData({...data, { [name]: value });
}
...
return (
<input name="firstName" onChange={changeHamdler}/>
<input name="lastName" onChange={changeHamdler}/>
<input name="password" onChange={changeHamdler}/>
);