React 钩子：如何使用 useState() 更新嵌套对象的状态？

Question

我有一个接收道具的组件，如下所示：

const styles = {
    font: {
        size: {
            value: '22',
            unit: 'px'
        },
        weight: 'bold',
        color: '#663300',
        family: 'arial',
        align: 'center'
    }
};

我正在尝试更新 align 属性，但是当我尝试更新对象时，我最终只用 align [=26] 替换了整个对象=].

这就是我更新它的方式：

const { ...styling } = styles;
const [style, setStyle] = useState(styling);

return (
        <RadioButtonGroup
            onChange={(event) => {
                setStyle({ ...style, font: { align: event.target.value } });
                console.log(style);
            }}
        />);

当我 console.log style 我刚得到 {"font":{"align":"left"}} 回来。我希望看到整个对象具有 align 的更新值。我是解构的新手，所以我在这里做错了什么？

Answer 1

您也需要使用扩展语法来复制字体对象属性。同样在尝试根据以前的状态更新当前状态时，使用回调模式

<RadioButtonGroup
  onChange={(event) => { 
    setStyle(prevStyle => ({
        ...prevStyle,
        font: { ...prevStyle.font, align: event.target.value }
    }));
    console.log(style);
  }}
/>

Answer 2

您可以通过这种方式更新样式

onChange={(event) => {
    const s = {...styles};
    s.font.align = event.target.value;
    setStyle(s);
    console.log(style);
}}

Answer 3

您的默认 useState 代码无效。对于默认的 useState，你应该像下面这样写：

  const { ...styling } = styles;
  const [style, setStyle] = useState({ styling }); // styling should be use in {}

return (
        <RadioButtonGroup
          onChange={event => {
            setStyle({
              ...styling,
              font: { ...styling.font, align: event.target.value }
            });
            console.log(style);
          }}
        />);

演示：用 console.log.

检查这个演示

Answer 4

这是你的错误

setStyle({
    ...style,
    font: { align: event.target.value } // This code replace the font object
});

要保留所有 font 对象值，您可以这样做

const onChange = (event) => {
    const s = {...style};
    s.font.align = event.target.value;
    setStyle(s);
}

或者

const onChange = (event) => {
    setStyle({ 
        ...style,
        font: {
            ...style.font, // Spread the font object to preserve all values
            align: event.target.value
        }
    });
}

Answer 5

首先： const { ...styling } = styles; 是相同的： const styling = styles;

但你可以完全跳过它，只需使用 [...] = useState(styles)

setStyle() 接受一个接收当前状态的函数，在你的案例风格中。因此，您可以使用扩展运算符 ... 来创建新对象并为其添加值。

setStyle(style => ({ ...style, font: { ...style.font, align: event.target.value } ) ) );

上面的代码使用了Arrow函数，也可以写成普通的函数，但可能更容易理解：

setStyle( function (style) {
    return  {
        ...style,
        font: {
            ...style.font,
            align: 'center'
        }
    }
});

您在 setStyle 中的 console.log 显示当前样式，因为更改后的样式将在下一次渲染中看到。所以我把 console.log 移到了 return.

之前

const [style, setStyle] = useState(styles);

console.log(style);

return (
        <RadioButtonGroup
            onChange={(event) => {
                setStyle(style => ({ ...style, font: { ...style.font, align: event.target.value } ) ) );
            }}
        />);

这里有一些链接可以帮助您理解这一切：

展开运算符：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
useState 挂钩：https://reactjs.org/docs/hooks-state.html
箭头函数：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 6

如果嵌套对象中有多个值，请尝试以下方法：

setPost({
  ...post,
  postDetails: {
    ...post.postDetails,
    [event.target.name]: event.target.value,
  },
});

React 钩子：如何使用 useState() 更新嵌套对象的状态？

React hooks: How do I update state on a nested object with useState()?

javascript

destructuring

reactjs