ReactJS跨文件访问状态：如何在newMove中获取this.state.planet？

嘿，我来帮你搞定这个报错！你遇到的Uncaught TypeError: Cannot read property 'state' of undefined，核心原因就是**newMove函数里的this没指向你的App组件实例**，所以找不到state对象。下面分两种常见情况给你具体的解决办法：

情况1：newMove是App组件的类方法 #

如果newMove是你App类里的方法，那得先把它的this绑定到组件实例上，有三种简单的方式：

方式1：在构造函数里手动绑定 #

修改你的App组件代码，在构造函数里加一行绑定代码：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = newPlay();
    // 把newMove的this绑定到组件实例
    this.newMove = this.newMove.bind(this);
  }

  // 定义类方法
  newMove(e) {
    // 现在就能正常访问this.state.planet啦
    console.log(this.state.planet);
  }

  render() {
    return (
      <div>
        <button onClick={this.newMove}>New Move</button>
      </div>
    );
  }
}

方式2：用箭头函数定义类方法 #

箭头函数会自动“继承”当前上下文的this，不用手动绑定，写起来更省心：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = newPlay();
  }

  // 用箭头函数定义方法，this自动指向组件实例
  newMove = (e) => {
    console.log(this.state.planet);
  }

  render() {
    return (
      <div>
        <button onClick={this.newMove}>New Move</button>
      </div>
    );
  }
}

方式3：在onClick里用箭头函数包裹 #

这种方式最简单，不过每次组件render都会创建新函数，小组件用完全没问题，大型组件可能影响一点点性能：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = newPlay();
  }

  newMove(e) {
    console.log(this.state.planet);
  }

  render() {
    return (
      <div>
        <button onClick={(e) => this.newMove(e)}>New Move</button>
      </div>
    );
  }
}

情况2：newMove是外部函数（比如在logic.js里） #

如果newMove是单独放在logic.js里的工具函数，它本身没有组件的this上下文，那你直接把需要的state属性传进去就行：

先修改logic.js里的newMove：

export const newMove = (planet) => {
  // 直接用传进来的planet参数就行
  console.log(planet);
  // 这里写你的其他逻辑...
}

然后修改App组件的onClick，把this.state.planet作为参数传过去：

import { newMove } from './logic.js';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = newPlay();
  }

  render() {
    return (
      <div>
        <button onClick={(e) => newMove(this.state.planet)}>New Move</button>
      </div>
    );
  }
}

对了，你原来的代码里onClick={(e) => newMove(e)}，如果newMove是类方法的话，这里少了this.，得写成this.newMove才能调用组件的实例方法，这也是容易踩的坑哦～

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