React跨组件修改状态遇报错：this.setState非函数等问题如何修复？

首先来说第一个问题：this.setState is not a function，这是典型的this指向错误导致的。你的App组件里的setActiveScreen方法没有正确绑定到组件实例，当子组件NavBar调用它的时候，this不再指向App的实例，自然找不到setState方法。

你可以用以下三种方法中的任意一种修复：

方法1：在构造函数中绑定this #

修改App组件的构造函数，手动把setActiveScreen的this绑定到组件实例：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeScreen: 'dashboard' }
    // 新增这一行绑定this
    this.setActiveScreen = this.setActiveScreen.bind(this);
  }

  setActiveScreen(key) {
    this.setState({ activeScreen: key })
  }

  render() {
    return (
      <NavBar activeScreen={this.state.activeScreen} setActiveScreen={this.setActiveScreen} />
    )
  }
}

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

箭头函数会自动捕获当前上下文的this，所以直接把setActiveScreen定义成箭头函数即可：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeScreen: 'dashboard' }
  }

  // 改成箭头函数
  setActiveScreen = (key) => {
    this.setState({ activeScreen: key })
  }

  render() {
    return (
      <NavBar activeScreen={this.state.activeScreen} setActiveScreen={this.setActiveScreen} />
    )
  }
}

方法3：传递props时用箭头函数包裹 #

在App的render方法里，把setActiveScreen用箭头函数包裹后传给NavBar，这样调用时this会指向App实例：

render() {
  return (
    <NavBar 
      activeScreen={this.state.activeScreen} 
      setActiveScreen={(key) => this.setActiveScreen(key)} 
    />
  )
}

接下来解决第二个问题：componentWillUpdate内重复调用setState的警告。

这个警告出现的原因是：当你点击Link组件时，一方面react-router会触发路由跳转，导致App组件因为路由变化重新渲染；另一方面你手动调用setActiveScreen触发setState，这就导致组件在更新过程中（componentWillUpdate阶段）又发起了一次状态更新，触发了重复更新的警告。

你可以通过以下两种方式解决：

方式1：仅当状态变化时才调用setState #

在setActiveScreen方法里加个判断，只有当传入的key和当前activeScreen不一致时，才执行setState，避免不必要的状态更新：

setActiveScreen = (key) => {
  if (this.state.activeScreen !== key) {
    this.setState({ activeScreen: key })
  }
}

方式2：通过路由监听自动同步状态 #

既然activeScreen是和路由对应的，你可以直接监听路由变化来更新状态，不需要手动在Link的onClick里调用setActiveScreen。这样既避免了重复更新，也让状态和路由保持同步：

修改App组件，添加路由监听：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      activeScreen: 'dashboard'
    }
  }

  componentDidMount() {
    // 监听路由变化
    this.unlisten = this.props.history.listen((location) => {
      // 根据location.pathname来映射对应的activeScreen，比如假设pathname和key对应
      const screenKey = this.getScreenKeyFromPath(location.pathname);
      this.setState({ activeScreen: screenKey });
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消监听
    this.unlisten();
  }

  // 自定义方法：根据路由路径获取对应的screen key
  getScreenKeyFromPath(path) {
    switch(path) {
      case '/dashboard':
        return 'dashboard';
      case '/profile':
        return 'profile';
      // 其他路由映射
      default:
        return 'dashboard';
    }
  }

  render() {
    return (
      <NavBar activeScreen={this.state.activeScreen} />
    )
  }
}

然后NavBar组件里的Link就不需要onClick事件了：

class NavBar extends Component {
  render() {
    // 假设你有导航项数组items
    return this.props.items.map(i => (
      <li className="nav-item" key={i.key}>
        <Link 
          className={`nav-link ${this.props.activeScreen === i.key ? 'active' : ''}`} 
          to={i.to}
        >
          {i.label}
        </Link>
      </li>
    ))
  }
}

这样处理后，路由变化时自动更新activeScreen，既不会有重复调用setState的问题，也能保证状态和路由的一致性。

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