上下文和提供者不工作-呈现不是一个函数。

Question

我一直在尝试很多事情，但我无法让这件事在我的生命中发挥作用。一直在看不同的上下文教程，但没有。我可以请您帮个忙吗？

App.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

SignupScreen.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:呈现不是一个函数。(在“呈现(NewValue)”中，“呈现”是对象的实例)。

为什么这不管用？

Answer 1

您有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>
  )
}

Answer 2

使用花括号似乎已经成功了！谢谢舒布姆！

我还必须在SignupScreen中更改以下内容，因此反过来，从是花括号改为无花括号：“

从‘./ UserContext /appContext.js’导入{ UserContext }，从‘./context/appContext.js’导入UserContext

因为UserContext是默认的导出。但它仍然是一个反应对象，不是吗？如果我把它放在花括号里，为什么会是“未定义的”呢？