Question

我正在尝试将变量从页面传递到另一个页面。

我已经在首页中定义了该变量，我想在App.js页面（应用启动时加载的页面以及我定义路由器和场景的页面）中使用此变量。

我需要将此变量传递给App.js页面，因为我想检查用户的角色，并且如果该角色等于“ plus”，则不要在导航栏中显示文本。

但是我不知道为什么我收到有关未定义变量（isLogged）的错误。

Homepage.js

export function RolesFunction(){
  var Roles = global.user.data.Roles;
  var isLogged = false;
  if (Roles === "PLUS") {
    isLogged = true;
  }
  return isLogged
}

class Homepage extends Component {
  constructor(props) {

App.js

import {RolesFunction} from './Scenes/Homepage';

export default class App extends Component {
componentDidMount(){
    isLogged =  RolesFunction()
  }
render() {
    return (
      <Router>
<Scene
  key="homepage"
  component={Homepage}
  type="reset"
  leftTitle="Home"
  leftButtonTextStyle={{ color: "#ffffff" }}
  onLeft={() => Actions.authentication()}
  rightButtonTextStyle={{ color: "#ffffff" }}
  rightTitle={isLogged == true ? "Logout" : ""}
  onRight={
  isLogged == true
     ? () => (App.logout())
     : () => {}
           }
/>

因此，当我启动应用程序时，会收到错误消息：

ReferenceError：未定义isLogged

此错误位于：

in App (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)

Answer 1

isLogged是RolesFunction中的 local 变量（RolesFunction返回其值）。如果要将返回值存储在其他组件的名为isLogged的另一个变量中，则需要在适当的范围内声明它（或更可能将其存储为属性，也许是state属性-在您的组件中）。

您只需在componentDidMount中获得一次值。您可以将其存储为render中的组件属性，也可以仅将其存储在render中，除非获取起来很昂贵（从显示的代码中可以看出来）。 / p>

就这样：

import {RolesFunction} from './Scenes/Homepage';

export default class App extends Component {
  render() {
    const isLogged = RolesFunction();
    return (
      <Router>
        <Scene
          key="homepage"
          component={Homepage}
          type="reset"
          leftTitle="Home"
          leftButtonTextStyle={{ color: "#ffffff" }}
          onLeft={() => Actions.authentication()}
          rightButtonTextStyle={{ color: "#ffffff" }}
          rightTitle={isLogged == true ? "Logout" : ""}
          onRight={
            isLogged == true
              ? () => (App.logout())
              : () => {}
          }
        />
      </Router>
    );
  }
}

旁注：当您已经具有布尔值时，就没有指向== true或=== true或类似名称的意义。只需使用您已经拥有的布尔值即可：

import {RolesFunction} from './Scenes/Homepage';

export default class App extends Component {
  render() {
    const isLogged = RolesFunction();
    return (
      <Router>
        <Scene
          key="homepage"
          component={Homepage}
          type="reset"
          leftTitle="Home"
          leftButtonTextStyle={{ color: "#ffffff" }}
          onLeft={() => Actions.authentication()}
          rightButtonTextStyle={{ color: "#ffffff" }}
          rightTitle={isLogged ? "Logout" : ""}
          onRight={
            isLogged
              ? () => (App.logout())
              : () => {}
          }
        />
      </Router>
    );
  }
}

Answer 2

contructor(props) {
 super(props)
 this.isLogin = fasle
}

componentDidMount() {
 this.isLogin = func() // Do smt
}

希望它对您有帮助，高级英语先生：D

Answer 3

变量isLogged在呈现函数的范围内未定义。尝试将其写入componentDidMount中的组件状态：

componentDidMount(){
    const isLogged =  RolesFunction()
    this.setState({ isLogged })
}

然后通过render函数中的状态访问它：

render() {
    return (
        <Router>
        <Scene
    key="homepage"
    component={Homepage}
    type="reset"
    leftTitle="Home"
    leftButtonTextStyle={{ color: "#ffffff" }}
    onLeft={() => Actions.authentication()}
    rightButtonTextStyle={{ color: "#ffffff" }}
    rightTitle={this.state.isLogged == true ? "Logout" : ""}
    onRight={
        this.state.isLogged == true
        ? () => (App.logout())
        : () => {}
    }/>

Answer 4

在App.js内添加一个构造函数，并使用以下函数定义isLogged：

constructor(props){
   super(props)
   this.state={isLogged:false}
 }

componentDidMount=()=>{
this.setState({isLogged: RolesFunction()})
}

然后在渲染函数中使用this.state.isLogged检查变量

从第二个错误开始，您启动应用程序时未定义全局变量，而使global.user等于未定义。

您尝试读取global.user.data.Roles时，由于找不到变量用户而中断。

您必须先定义该变量，然后才能进入该屏幕，或者在该屏幕内定义它

Answer 5

请在isLogged中定义App.js，这是错误的。使用this.isLogged代替isLogged

App.js

import {RolesFunction} from './Scenes/Homepage';

export default class App extends Component {
componentDidMount(){
    this.isLogged =  RolesFunction()
  }
render() {
    return (
      <Router>
<Scene
  key="homepage"
  component={Homepage}
  type="reset"
  leftTitle="Home"
  leftButtonTextStyle={{ color: "#ffffff" }}
  onLeft={() => Actions.authentication()}
  rightButtonTextStyle={{ color: "#ffffff" }}
  rightTitle={isLogged == true ? "Logout" : ""}
  onRight={
  this.isLogged == true
     ? () => (App.logout())
     : () => {}
           }
/>

ReferenceError：“变量”未定义

5 个答案: