如何在嵌套对象中设置状态

Question

想知道是否有办法使用useState((更新 React 中的嵌套对象状态

import React, {useState} from 'react'
const MyComp = () => {
const [colors, setColors] = useState({colorA: 'RED', colorB: 'PURPLE'});
return (
<div>
<span>{colors.colorB}</span>
<button onClick={() => setColors({...colors, colors: { colorB: 'WHITE'}})}>CLICK ME</button>
</div>
)
}

export default MyComp;

我想使用useReducer((，但我读到它通常用于更复杂的状态，也许在这种情况下使用useState((有一个解决方案。

有什么想法吗？

提前感谢

Answer 1

colors已经是整个对象，则无需声明为属性。

spread原始对象并覆盖colorB

() => setColors({...colors, colorB: 'WHITE'}) 

Answer 2

您以错误的方式更新状态。将您的按钮语句更改为下面，

<button onClick={() => setColors({...colors, colorB: 'WHITE'})}>CLICK ME</button>

Answer 3

使用

setColors({...colors, colorB: 'WHITE'})

而不是

setColors({...colors, colors: { colorB: 'WHITE'}})

Answer 4

为此最好使用函数形式的setState，因为下一个状态值取决于状态的当前值：

return (
<div>
<span>{colors.colorB}</span>
<button
onClick={() => setColors(currentColors => ({ ...currentColors, colorB: "WHITE" }))}
>
CLICK ME
</button>
</div>
);

Answer 5

由于您已经完成了点差，它将具有属性colorB，您只需要使用新值进行更新即可

const handleButtonClick = () => {
setColors({ ...colors, colorB: "WHITE" });
};

将其转换为函数将更具可读性。

法典

import React, { useState } from "react";
import ReactDOM from "react-dom";
const MyComp = () => {
const [colors, setColors] = useState({ colorA: "RED", colorB: "PURPLE" });
const handleButtonClick = () => {
setColors({ ...colors, colorB: "WHITE" });
};
return (
<div>
<span>{colors.colorB}</span>
<button onClick={handleButtonClick}>CLICK ME</button>
</div>
);
};
export default MyComp;
const rootElement = document.getElementById("root");
ReactDOM.render(<MyComp />, rootElement);

工作代码笔

Answer 6

语句中存在一个小语法错误

const App = () => {

const [colors, setColors] = useState({ colorA: 'RED', colorB: 'PURPLE' });
return (
<div>
<span>{colors.colorB}</span>
<button onClick={
() =>
setColors(
{ ...colors,colorB: 'WHITE' }
)
}>CLICK ME</button>
</div>
)
}