Javascript 单击按钮时反应状态未更改

所以我最近开始从Udemy学习react，我编写了这段代码，当点击一个按钮时，它会动态地改变页面的状态。导师有相同的代码，他的代码运行得非常好，但我的代码却不行。我能知道怎么了吗

这是我的App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Person from './Person/Person';


class App extends Component {

  state = {
    persons: [
      {name : 'Honey', age : 23},
      {name : 'Test', age: 19},
      {name : 'Test2', age: 21}
    ],
    otherState : 'Hmm'
  }

//edit

  switchPersonHandler = () => {
    this.setState = ( {
      persons: [
        {name : 'Honey', age : 23},
        {name : 'Ahhh', age: 19},
        {name : 'Change this', age: 21}
      ]
    } )
}


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React :)</h1>
        </header>
        <button onClick={this.switchPersonHandler}>Switch Name</button>
        <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
        <Person name={this.state.persons[1].name} age={this.state.persons[1].age}/>
        <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./人/人”导入人；
类应用程序扩展组件{
状态={
人员：[
{姓名：'亲爱的'，年龄：23}，
{姓名：'测试'，年龄：19}，
{姓名：'Test2'，年龄：21}
],
另一种状态：“嗯”
}
//编辑
switchPersonHandler=（）=>{
this.setState=（{
人员：[
{姓名：'亲爱的'，年龄：23}，
{姓名：'Ahhh'，年龄：19}，
{姓名：“更改此”，年龄：21}
]
} )
}
render（）{
返回(
欢迎回复：）
交换机名称
);
}
}
导出默认应用程序；

这是我的个人资料

import React from 'react'

const person = (props) => {
return  <div>
            <p>My name is {props.name} and my age is {props.age}</p>
        </div>

}

export default person;

从“React”导入React
const person=（道具）=>{
返回
我的名字是{props.name}，我的年龄是{props.age}

}
出口违约人；

所以，我想做的是，当点击按钮时，他们会动态地合并persons对象，更新的内容会显示在网页上。

---

另外，如果这是一个糟糕的问题，请原谅，我对这个问题真的很陌生。

这是您可以使用的代码，单击

运行此代码段

查看其工作原理：

将要进行的更改：

1-将带有小写字母

p的
person
组件更改为
person

2-
this.setState
是一个函数，您需要将
状态作为参数传递


功能人员（道具）{
返回(
我的名字是{props.name}，我的年龄是{props.age}

)
}
类应用程序扩展了React.Component{
状态={
人员：[
{姓名：'亲爱的'，年龄：23}，
{姓名：'测试'，年龄：19}，
{姓名：'Test2'，年龄：21}
],
另一种状态：“嗯”
}
switchPersonHandler=（）=>{
这是我的国家({
人员：[
{姓名：'工作'，年龄：23}，
{姓名：'Ahhh'，年龄：19}，
{姓名：“更改此”，年龄：21}
]
})
}
render（）{
返回(
欢迎回复：）
交换机名称
);
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
这是
this.setState（{persons:[…]}）
成功了，谢谢。问题是我在setState中使用了“=”符号，我可能把自己和新旧语法搞混了。