React Native - this.setState 不是一个函数

Question

使用的技术：

• 反应原生
• 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 () {} 之上时，我尝试使用关键字this 在代码的screenProps 部分传递assignScreenType，如下所示：...this.assignScreenType 我得到一个@ 的新错误987654337@ 不是函数，因为该方法现在未定义。
• 我已将我的方法移到render() {} 下，并将该方法定义为常量。这消除了所有错误，但现在实际上没有发生任何操作。
• 我尝试过使用 constructor super(); 语法。
• 我已经尝试将方法currying并将其置于class App extends Component之上，然后在Colors.js中调用该函数时，删除包装() =>的匿名函数
• 我通过 Discord 联系了 React Native 社区，但也没有成功。

结果

到目前为止，我所做的任何尝试都会导致以下错误之一： - this.setState is not a function - this.props.screenProps.assignScreenType 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')