React报错Uncaught TypeError：无法读取manageChange属性，求排查方案

嘿，我一眼就揪出问题所在啦！你虽然在constructor里绑定了manageChange的this，也尝试过箭头函数定义方法，但核心问题出在map的回调函数里的this指向不对。

咱们拆解下原因：当你用普通函数作为map的回调时，这个函数内部的this并不是App组件的实例（严格模式下默认是undefined），所以在回调里访问this.manageChange时，自然会找不到这个方法，抛出类型错误。

给你三个可行的解决方案，任选其一就能搞定：

• 方案1：把map的回调改成箭头函数
  箭头函数不会绑定自己的this，会继承外层上下文的this（也就是App组件的实例）。修改后的代码如下：

  render() {
    const todoItems = this.state.todos.map((item) => {
      return (<TodoItem key={item.id} items={item} handleChange={this.manageChange} />);
    });
    return (
      <div className="app">
        {todoItems}
      </div>
    );
  }
  

• 方案2：在map前保存this的引用
  在map执行前把组件的this存到一个变量里（比如self），然后在回调里用这个变量访问manageChange：

  render() {
    const self = this;
    const todoItems = this.state.todos.map(function (item) {
      return (<TodoItem key={item.id} items={item} handleChange={self.manageChange} />);
    });
    return (
      <div className="app">
        {todoItems}
      </div>
    );
  }
  

• 方案3：给map传入第二个参数指定this
  Array.map方法支持第二个参数，用来指定回调函数内部的this指向，直接传入组件的this即可：

  render() {
    const todoItems = this.state.todos.map(function (item) {
      return (<TodoItem key={item.id} items={item} handleChange={this.manageChange} />);
    }, this); // 传入组件的this，让回调里的this指向App实例
    return (
      <div className="app">
        {todoItems}
      </div>
    );
  }
  

你之前绑定manageChange的操作是对的，只是没注意到map回调里的this上下文问题，试试上面的方法应该就能顺利解决啦！

内容的提问来源于stack exchange，提问作者Shriprada S