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

为此最好使用return ( <div> <span>{colors.colorB}</span> <button onClick={() => setColors(currentColors => ({ ...currentColors, colorB: "WHITE" }))} > CLICK ME </button> </div> );的函数形式，因为下一个状态值取决于状态的当前值：

const localDate = new Date(1489199400000);

localDate.getTimeZoneOffset();//time zone offset

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);

工作Codepen

Answer 6

尝试使用

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

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

6 个答案: