Javascript TypeError:无法设置属性'；州'；未定义的

我是

React JS

的初学者，我正在尝试学习如何在React中使用state和使用state，但我不断遇到错误

无法设置未定义的状态属性

从“React”导入React；
导入“/App.css”；
导入“/bootstrap.min.css”；
函数App（）{
此.state={
按钮颜色：“浅绿色”
}
常量changeColor=（）=>{
this.setState（{buttonColor:this.state.buttonColor='lightblue'}）；
}
返回(
changeColor（）}
style={{backgroundColor:this.state.buttonColor}
className=“btn文本白色mt-5 ml-5”>
变色
);
}
导出默认应用程序；
如果您使用的是一个应用程序，则上述设置状态的方法将起作用

但您使用的是a，因此它不起作用

这就是如何使用react函数组件和

import React，{useState}来自“React”；
函数App（）{
const[buttonColor，setButtonColor]=useState（“浅绿色”）；
常量changeColor=（）=>setButtonColor（“浅蓝色”）；
返回(
变色
);
}
导出默认应用程序；

记住

您是要制作函数组件还是类组件？你的问题基本上是你在混合它们的语法。
import React, { useState } from "react";

function App() {
  const [buttonColor, setButtonColor] = useState("lightgreen");

  const changeColor = () => setButtonColor("lightblue");

  return (
    <button
      onClick={changeColor}
      style={{ backgroundColor: buttonColor }}
    >
      Change Color
    </button>
  );
}
export default App;