Контекст и провайдер не работают - рендеринг не является функцией - PullRequest
Новая
       95

Контекст и провайдер не работают - рендеринг не является функцией

0 голосов
/ 25 мая 2020

Пробовал много вещей, но я не могу заставить это работать хоть убей. Смотрел различные учебники по контексту, но нет. Не могли бы вы мне помочь?

Приложение. js

import React from 'react'
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AccountScreen from './src/screens/AccountScreen'
import SigninScreen from './src/screens/SigninScreen'
import SignupScreen from './src/screens/SignupScreen'
import TrackCreateScreen from './src/screens/TrackCreateScreen'
import TrackDetailScreen from './src/screens/TrackDetailScreen'
import TrackListScreen from './src/screens/TrackListScreen'
import UserProvider from './src/context/appContext'


const switchNavigator = createSwitchNavigator({
  loginFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen
    }),
    TrackCreate: TrackCreateScreen,
    Account: AccountScreen
  })
})

const App = createAppContainer(switchNavigator)

export default () => {
  return (
    <UserProvider value={'hey'}>
      <App />
    </UserContext.Provider>
  )
}

appContext. js

import React, { createContext } from 'react'

const UserContext = React.createContext()

export const UserProvider = UserContext.Provider
export const UserConsumer = UserContext.Consumer

export default UserContext

Экран регистрации. js

import React, { useState, useContext, Component } from 'react'
import { View, StyleSheet, Button } from 'react-native'
import { Text, Input } from 'react-native-elements'
import Spacer from '../components/Spacer'
import { signUpUser } from '../functions/functions.js'
import { UserContext } from '../context/appContext.js'


const SignupScreen = ({ navigation, value }) => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')


  return (
  <View style={styles.container}>
    <Spacer>
      <Text h3>Sign up for goodgrowth</Text>
    </Spacer>
    <Input
    label="Email"
    value={email}
    onChangeText={setEmail}
    autoCapitalize="none"
    autoCorrect={false}
    />
    <Spacer />
    <Input
    secureTextEntry
    label="Password"
    value={password}
    onChangeText={setPassword}
    autoCapitalize="none"
    autoCorrect={false}
    />
    <Spacer>
      <Button
      title="Sign up"
      onPress={() => signUpUser(email, password)}
      />
      <Button
      title="Sign in"
      onPress={() => navigation.navigate('Signin')}
      />
    </Spacer>
  </View>
  )
}

SignupScreen.navigationOptions = () => {
  return {
    header: null
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginBottom: 250
  }
})

export default SignupScreen

TypeError: рендеринг не является функцией. (В 'render (newValue)', 'render' - это экземпляр объекта.)

Почему это не работает?

Ответы [ 2 ]

1 голос
/ 25 мая 2020

У вас есть exported UserProvider as a named export, но вы импортируете по умолчанию в App. js, что дает вам UserContext, а не UserProvider

Также ваш синтаксис UserProvider неверен.

Используйте как 

import { UserProvider } from './src/context/appContext' // named import

...

export default () => {
  return (
    <UserProvider value={'hey'}>
      <App />
    </UserProvider>
  )
}
0 голосов
/ 25 мая 2020

Использование фигурных скобок, похоже, помогло! Спасибо, Шубхам!

Мне также пришлось изменить следующее в RegistrationScreen, поэтому наоборот, с фигурных скобок да на фигурные скобки: "

import {UserContext} from '.. /context/appContext.js 'ДЛЯ импорта UserContext из' ../context/appContext.js '

Поскольку UserContext был экспортным по умолчанию там. Но это все еще объект React, нет? он будет undefined, если я оставлю его в фигурных скобках?

...