是否可以在反应原生的类组件之外声明常量变量？

Question

我正在尝试在我的类组件之外在 react native 中创建以下常量变量：

import { Component, useState } from 'react';

const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
    

class NotificationScreen extends Component {

但是运行app时会弹出如下错误：

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might... 

有没有办法在类中使用常量变量？

Answer 1

您正在使用 Hooks 类内组件定义 state，这就是您遇到错误的原因。您可以仅在功能组件中使用 Hooks，并且只能在其中使用 Hook，但不能在其范围之外作为常量使用。

您当然可以在类之外定义常量并且可以使用它，但它只能是static 数据，例如 HTTP 请求的BaseURL 或用户类型等，但如果您必须使用state，则需要在类中定义它。

你可以使用Hookslike来实现它

import { Component, useState } from 'react';

function NotificationScreen(props) {

  const [isEnabled, setIsEnabled] = useState(false); 
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

}

如果你想使用类，那么你可以像这样实现它

import { Component, useState } from 'react';

class NotificationScreen extends Component {

  state = { isEnabled : false } 

  toggleSwitch = () => {
    this.setState({ isEnabled: !this.state.isEnabled }); 
  }    
}

Answer 2

在基于类的组件中，您可以直接将状态用作this.state 而不是useState。 useState 用于功能组件。

所以，在你的情况下，

class NotificationScreen extends Component {
  state = {
    isEnabled: false
  }

  toggleSwitch = ()=>{
    this.setState(prevState => ({isEnabled: !prevState.isEnabled}))
  }

  render(){
    return (
      <button onPress={this.toggleSwitch}>Press Me!</button>
    )
  }

或者如果你想要一个全局状态，你将不得不使用类似redux