在 React-Native 中为 'undefined' 显示了错误的按钮

Question

我正在使用 React Native，但在我的 'initial' 屏幕上识别“未定义”（指定为“主页”）时遇到困难。这是代码。

Routes.js

import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from './Home.js'
import About from './About.js'
import Login from './Login.js'
import Other from './Other.js'

const Routes = () => (
   <Router>
      <Scene key = "root">
         <Scene key = "home" component = {Home} title = "Home" initial = {true} />
         <Scene key = "about" component = {About} title = "About" />
         <Scene key = "login" component = {Login} title = "Login" />
         <Scene key = "other" component = {Other} title = "Other" />
      </Scene>
   </Router>
)
export default Routes

Home.js

import React, { useState, useContext, createContext } from 'react'
import { Button, TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

import { LogContextProvider, LogContext } from './LogContext'

const Home = (props) => {
const status = useContext(LogContext);

   const goToAbout = () => {
      Actions.about()
   }
   const goToLogin = () => {
      Actions.login()
   }

      console.log('props called: ' + props.address);  //displays undefined
      console.log('props called: ' + props.name);  //displays undefined
      console.log('props called: ' + props.login);  //displays undefined


   return (
         <LogContext.Provider value={status}>
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}>
         <Text>This is HOME!</Text>
      </TouchableOpacity>
      {props.login === "undefined" ? (
        <Button
          title="Go to Login"
          onPress={goToLogin}
        />
      ) : (
        <Button
          title="Do Something"
          onPress={() => Actions.Other()}
        />
      )}
         </LogContext.Provider>
   )
}
export default Home

我的代码是这样编写的，以便在启动应用程序时，'props.login' 是“未定义的”（由“console.log”确认）但是正确的按钮（“转到登录” ) 没有被显示...为什么？由于应用程序的初始 startup/run 没有将任何变量传递给 'props' 我不明白为什么没有显示正确的按钮。感谢任何帮助。

Answer 1

通过查看您的代码，我认为问题在于您检查的是字符串 "undefined" 而不是 undefined。它们不相等，因此不会显示“Go to Login”按钮。所以改变它：

// ...
{
  props.login === undefined ? (
    <Button title="Go to Login" onPress={goToLogin} />
  ) : (
    <Button title="Do Something" onPress={() => Actions.Other()} />
  );
}
// ...

在 React-Native 中为 'undefined' 显示了错误的按钮

Wrong button displayed for 'undefined' in React-Native

react-native

react-native-router-flux