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

Posted 2023-02-22

【中文标题】如何在嵌套对象中设置状态

【英文标题】：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

【参考方案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>
  )