React JS V17.0.0：无法分配给对象'#<Object>'的只读属性'color'答案

【问题标题】：React JS V17.0.0: Cannot assign to read only property 'color' of object '#<Object>'React JS V17.0.0：无法分配给对象'#<Object>'的只读属性'color'
【发布时间】：2020-11-05 13:35:31
【问题描述】：

您好，我是 React JS 的新手，我想根据 React JS 中的点击事件动态更改 h1 标签的颜色。我试过了，这里是StackBliz Link。

当我尝试更新样式对象时，我收到了Error: Cannot assign to read only property color of object。

我尝试了许多在 stackoverflow 中发布的解决方案，但没有一个能帮助我解决这个问题。请帮帮我。

App.js

    import React from "react";
    import "./style.css";
    
    export default function App() {
      const style = {
        color: "coral"
      };
    
      const changeColor = () => {
        style.color = style.color === "coral" ? "gray" : "coral";
      };
    
      return (
        <div>
          <button onClick={() => changeColor()}>Change Color</button>
          <h1 style={style}>Hello StackBlitz!</h1>
          <p>Start editing to see some magic happen :)</p>
        </div>
      );
    }

这是我尝试过的解决方案，但没有成功。

    Object.defineProperties(style, {
      color: {
        value: "coral",
        writable: true
      }
    });

【问题讨论】：

为状态分配颜色，使用 setState 更新它
好的@AlexanderStaroselsky 我会尝试并回复你。谢谢
我没有看到你有一个功能组件，使用 useState 钩子来管理状态。
这能回答你的问题吗？ Why is React not rendering my component state correctly?
@SaiSurya React 的整个理念是，您的视图是应用程序状态的纯函数。 “纯”有一个很specific meaning for a function，而你的函数并不纯。在之前的 React 版本中，您只是看不到更改，新版本会引发错误。 official documentation 和 tutorial 很好地涵盖了所有这些内容。

标签： javascript reactjs

【解决方案1】：

您不能使用静态变量来更改虚拟 DOM。

使用useState 更改您的颜色。

https://stackblitz.com/edit/react-qkmqcu?file=src%2FApp.js

说明

正如我告诉你的，你在 DOM 中指定了只读 const 并且你不能改变它，每当你点击按钮时，你必须重新渲染你的虚拟 DOM，为此，你必须将你的颜色分配给状态并且错误还告诉您不能分配任何可更改的东西（意味着它是只读的）

【讨论】：

非常感谢。使用 state 解决了这个问题，但你能告诉我我提到的错误的原因吗？