调用父组件onClick后React状态变为undefined问题求助

兄弟，我看你这问题大概率是switchLaunch函数的this上下文没绑定到App组件实例上！

你想啊，当子组件里的Span触发点击事件调用这个函数时，this的指向已经不是App组件了，所以this.state自然就变成undefined了；而你用this.allPastLaunches能拿到数据，估计是你把接口返回的结果直接存在了组件实例的属性上（比如请求后写了this.allPastLaunches = res.data，而不是通过setState存到state里），所以不管this指向啥，只要能摸到这个实例属性就有值，但这可不是React状态管理的正确姿势哦。

给你几个靠谱的解决方案：

1. 在构造函数里手动绑定this #

这是最传统也最稳妥的方式，在组件的constructor里给函数绑定this：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allPastLaunches: [] // 记得初始化状态哦
    };
    // 关键一步：把switchLaunch的this绑定到当前组件实例
    this.switchLaunch = this.switchLaunch.bind(this);
  }

  componentDidMount() {
    // 接口请求示例，数据要存到state里
    fetch('你的API地址')
      .then(res => res.json())
      .then(data => {
        this.setState({ allPastLaunches: data });
        // 别再直接存this.allPastLaunches了哈
      });
  }

  switchLaunch() {
    // 现在this就指向App组件了，能正常访问state
    console.log(this.state.allPastLaunches);
  }

  render() {
    // 直接传递绑定好的函数给子组件
    return <ChildComponent onClick={this.switchLaunch} />;
  }
}

2. 用箭头函数定义switchLaunch #

箭头函数会自动继承外层的this上下文，省得手动绑定：

class App extends Component {
  // 直接用类字段初始化state
  state = {
    allPastLaunches: []
  };

  componentDidMount() {
    fetch('你的API地址')
      .then(res => res.json())
      .then(data => this.setState({ allPastLaunches: data }));
  }

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

  render() {
    return <ChildComponent onClick={this.switchLaunch} />;
  }
}

3. 传递时用箭头函数包裹（应急用） #

如果不想改方法定义，也可以在render里用箭头函数包裹后传给子组件：

render() {
  return <ChildComponent onClick={() => this.switchLaunch()} />;
}

不过要注意，这种方式每次组件render都会创建新的函数，频繁渲染的话可能有点性能损耗，所以优先推荐前两种方法。

最后再提醒一句：数据一定要存在state里，别直接挂在组件实例上，这样React才能感知到数据变化，自动帮你更新组件~

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