React Native中this.setState is not a function问题求助

嘿，我来帮你搞定这个报错！先看看你的代码里的问题所在：

错误原因 #

• this指向错误：你把assignScreenType函数定义在了App类的外面，这里的this根本不是App组件的实例，自然找不到setState方法。
• 未初始化state：App组件里没有初始化state，就算方法在类里，也得先有state才能调用setState更新。
• screenProps变量未定义：你在screenProps里传递的state, updateRed等变量，看起来也没在App类里定义，这后续也会引发问题。

解决方案 #

我们一步步修正代码：

1. 把方法移到类内并绑定this #

最简便的方式是用箭头函数定义类方法，它会自动绑定组件实例的this；也可以在构造函数里手动绑定普通函数的this。

2. 初始化组件state #

在App类里初始化需要的状态，比如currentScreen和颜色相关的变量。

3. 正确传递screenProps #

确保传递给Router的变量都是App类里已定义的状态或方法。

修正后的完整代码 #

App.js #

import React, { Component } from 'react';
import { Router } from './Router';

class App extends Component {
  // 初始化组件状态（类字段语法，简洁直观）
  state = {
    currentScreen: 'ColorPicker', // 默认显示第一个标签页
    red: 0,
    green: 0,
    blue: 0,
    // 其他颜色相关状态可以在这里补充
  };

  // 用箭头函数定义方法，自动绑定this
  assignScreenType = (screenType) => {
    this.setState({ currentScreen: screenType });
  };

  // 示例：实现你需要的颜色更新方法（根据需求完善逻辑）
  updateRed = (value) => {
    this.setState({ red: value });
  };

  updateGreen = (value) => {
    this.setState({ green: value });
  };

  updateBlue = (value) => {
    this.setState({ blue: value });
  };

  // 其他如updateCyan、calculateCMYK等方法同理补充...

  render() {
    return (
      <Router 
        screenProps={{ 
          state: this.state,
          assignScreenType: this.assignScreenType,
          updateRed: this.updateRed,
          updateGreen: this.updateGreen,
          updateBlue: this.updateBlue,
          // 把你需要传递的其他方法都添加到这里
        }} 
      />
    );
  }
}

export default App;

Router.js（保持不变） #

import { TabNavigator } from 'react-navigation';
import ColorPicker from './ColorPicker';
import Palette from './Palette';

export const Router = TabNavigator({
  ColorPicker: { screen: ColorPicker },
  Palette: { screen: Palette }
});

可选：手动绑定this的方式 #

如果你不想用箭头函数，也可以在构造函数里手动绑定方法的this：

constructor(props) {
  super(props);
  this.state = {
    currentScreen: 'ColorPicker',
    red: 0,
    green: 0,
    blue: 0
  };
  // 手动绑定this
  this.assignScreenType = this.assignScreenType.bind(this);
  this.updateRed = this.updateRed.bind(this);
}

// 普通函数定义方法
assignScreenType(screenType) {
  this.setState({ currentScreen: screenType });
}

updateRed(value) {
  this.setState({ red: value });
}

这样修改后，this.setState就能正确指向App组件实例，不会再报错啦！

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