首页 > 解决方案 > React Native - 找不到变量:渲染

问题描述

我第一次尝试在我的 React-Native 应用程序上实现 Redux。我有错误找不到变量:渲染

在我的 index.js 上,我调用了一个 Provider 来使用 Redux。所以我添加了一个渲染它并触发了这个错误。

这是我的 index.js 文件:

//index.js
import React from "react";
import {AppRegistry} from 'react-native';
import App from './App';
import { Provider } from 'react-redux'
import Store from './redux/Store/store'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

render(
  <Provider store={Store}>
    <App/>
  </Provider>,
  document.getElementById('root')
)

如果有用,调用的 App 组件:

import firebase from '@firebase/app'
import '@firebase/auth'
import React from 'react';
import { View, Text, Button, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import Listing from './Listing';
import Menu from './Menu';
import Login from './Login';
import TestRedux from './redux/Components/TestRedux';

firebase.initializeApp({
    apiKey: "XXXXXXX",
    authDomain: "XXXXXXX",
    databaseURL: "XXXXXXX",
    projectId: "XXXXXXX",
    storageBucket: "XXXXXXX",
    messagingSenderId: "XXXXXXX"
});

export class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      user:'',
      loggedAndVerifiedOrNot: false
    }

   firebase.auth().onAuthStateChanged((user) => {
        //this.setState({ user: user })
        if (user != null) {
            if (user.emailVerified!=null)
            {
              if (user.emailVerified == true)
              this.setState({loggedAndVerifiedOrNot: true})
            }
        }
    });
  }

  render(){
      if (this.state.loggedAndVerifiedOrNot) {
            this.props.navigation.navigate('Menu');         
      } 
      else {
            this.props.navigation.navigate('Login');
      }
      return (null)
  }
}

export default createStackNavigator({
    Home: {
      screen: App,
    },
    Login: {
      screen: Login,
    },
    Menu: {
      screen: Menu,
    },
    Listing: {
      screen: Listing,
    },
    TestRedux: {
      screen: TestRedux,
    },
  }, 
  {
    initialRouteName: 'Home',
  }
);

你知道这个错误来自哪里以及如何解决它吗?

标签: react-nativeredux

解决方案


语法是:

render() {
    return ( ... somethingToRender ... )
}

还有这个

    render() {
       return (
         <Provider store={Store}>
           <App/>
         </Provider>,
       )
   }

需要在您的 App 组件中并从 index.js 中删除。

您不需要 document.getElementById。应用本质上是你的根元素


推荐阅读