Javascript 如何访问此.state.map（）中的类函数

我试图在

this.state.persons.map（）中使用switchHandler函数

“无法读取未定义”错误的属性“switchHandler”

。但是，如果我在map函数之外使用它，它是可以访问的

class App extends Component {
  state = {
    persons: [
      { name: "Max", age: 28 },
      { name: "Manu", age: 27, child: "My hobbies : racing" },
      { name: "Ron", age: 26 }
    ]
  };

  switchHandler = () => {
    this.setState({
      persons: [
        { name: "Maxii", age: 28 },
        { name: "Manu", age: 27, child: "My hobbies : swiming" },
        { name: "Ron", age: 26 }
      ]
    });
    //return "correct";
  };
  render() {
    //let obj = new App();
    return (
      <div className="App">
        <button onClick={this.switchHandler}>Switch Name</button>
        {this.state.persons.map(function(data) {
          return (
            <div>
              <Person
                clickChild={this.switchHandler}
                name={data.name}
                age={data.age}
              >
                {data.child}
              </Person> // // Here I'm getting error for switchHandler

            </div>
          );
        })}
        <Person name="tag" age="34" clickChild={this.switchHandler}>
          just
        </Person> // Here switchHandler is working fine


      </div>
    );
  }
}

export default App;

类应用程序扩展组件{
状态={
人员：[
{姓名：“Max”，年龄：28}，
{姓名：“马努”，年龄：27岁，孩子：“我的爱好：赛车”}，
{姓名：“罗恩”，年龄：26}
]
};
switchHandler=（）=>{
这是我的国家({
人员：[
{姓名：“Maxii”，年龄：28}，
{姓名：“马努”，年龄：27岁，孩子：“我的爱好：游泳”}，
{姓名：“罗恩”，年龄：26}
]
});
//返回“正确”；
};
render（）{
//设obj=newapp（）；
返回(
交换机名称
{this.state.persons.map（函数（数据））{
返回(
{data.child}
////这里是switchHandler的错误
);
})}
只是
//这里的switchHandler工作正常
);
}
}
导出默认应用程序；

错误：
App.js:34未捕获的TypeError:无法读取的属性“switchHandler”
未定义

由于您的代码在map的回调函数中，所以（这个）上下文将被称为这个回调函数

其中，在其他位置，它的in-render函数和（此）上下文被正确地引用到此组件

在渲染函数中置于第行下方

const self = this;

然后参考self.switchHandler，其中该.switchHandler未按以下方式工作

clickChild={self.switchHandler}

谢谢
您可以试试：{（）=>this.switchHandler}@Mrinal Welcome！！如果你能投票选出答案，那就太好了！！