如何访问 this.state.map() 中的类函数

Question

我试图在里面使用 switchHandler 函数this.state.persons.map()但是得到“无法读取未定义的属性‘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;错误：App.js:34 未捕获的类型错误：无法读取未定义的属性“switchHandler”

Answer 1

由于您的代码位于地图的回调函数中，因此 (this)context 将被称为回调函数的 this。

在其他地方，它在渲染函数中，并且（这个）上下文被正确地引用到组件 this。

将下面的行放在渲染函数中

const self = this;

然后参考self .switchHandler where this.switchHandler 不工作如下

clickChild={self.switchHandler}

谢谢