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

【问题标题】：How to set state in nested object如何在嵌套对象中设置状态
【发布时间】：2020-03-28 01:51:13
【问题描述】：

想知道是否有办法使用 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()

有什么想法吗？

提前谢谢

【问题讨论】：

这能回答你的问题吗？ React Hooks useState() with Object

标签： javascript reactjs react-hooks

【解决方案1】：

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

spread原始对象并覆盖colorB

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

【讨论】：

【解决方案2】：

您以错误的方式更新状态。将您的按钮声明更改为以下内容，

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

使用

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

代替

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

【讨论】：

【解决方案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);

工作Codepen

【讨论】：

【解决方案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>
  )
}

【讨论】：