Question

使用的技术：

React Native
React Navigation

问题：

this.setState不是函数。

代码：

Router.js

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

App.js

assignScreenType = screenType => {
  this.setState({
    currentScreen: screenType
  });
};

class App extends Component {
  render() {
    return (
    <Router
      screenProps={
        { state, updateRed, updateGreen, updateBlue, updateCyan, updateMagenta, updateYellow, updateBlack, calculateCMYK, calculateRGB, convertToHex, assignScreenType, renderSlider, saveColorSelection }
      }
    />
    );
  }
}

export default App;

Colors.js

<Button
  title="Test 1"
  onPress={ () => console.log((this.props.screenProps.assignScreenType))}
/>

<Button
  title="Test 2"
  onPress={ () => this.props.screenProps.assignScreenType('HEXScreen') }
 />

console.log显示的内容：

我尝试了什么：

我已将方法移至class App extends Component及render () {}之上。这会缓解this.setState is not a function，但会引入新错误：ReferenceError: assignScreenType is not defined。
当该方法未消失class App extends Component且高于render () {}时，我尝试使用关键字assignScreenType在代码的screenProps部分中传递this，如下所示：{{ 1}}我得到...this.assignScreenType的新错误不是函数，因为该方法现在未定义。
我在this2.props.screenProps.assignScreenType下移动了我的方法，并将方法定义为常量。这消除了所有错误，但现在实际上没有发生任何动作。
我尝试使用render() {} constructor语法。
我尝试过调整方法并将其置于super();之上，然后在调用Colors.js中的函数时，删除包含class App extends Component的匿名函数
我通过Discord与React Native社区联系，也没有运气。

结果

到目前为止我尝试的任何内容都会导致以下错误之一： - () => - this.setState is not a function - 没有动作。

我已经在这几个小时了，我没有运气。我尝试了几种解决方案，我尝试过询问另一位开发人员，并尝试在Discord中询问React Native社区。在使用React时，我没有问题传递道具/状态/方法，但尝试通过React Navigation传递道具/状态/方法对我来说不起作用。

Answer 1

您应该在类上定义方法，以便它具有正确的this上下文，然后使用render在this.assignScreenType方法中引用该方法：

class App extends Component {

  assignScreenType = screenType => {
    this.setState({
      currentScreen: screenType
    });
  };

  render() {
    return (
    <Router
      screenProps={
        { assignScreenType: this.assignScreenType, /* ...your other screenProps */ }
      }
    />
    );
  }
}

Answer 2

以下不会起作用，因为箭头函数根本没有上下文（又名this）：

 assignScreenType = screenType => {
   this.setState({

因此，使其成为常规功能：

 function assignScreenType( screenType) {
   this.setState({

然后执行以下操作：

  this.props.screenProps.assignScreenType('HEXScreen')

当它调用上下文为screenProps的函数时，它不会工作，你需要在那里更改上下文：

  this.props.screenProps.assignScreenType.call(this, 'HEXScreen')

React Native - this.setState不是函数