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

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 已经是整个对象，您不需要声明为属性。

展开原始对象并覆盖colorB

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