上下文和提供程序不工作 - 渲染不是函数

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：渲染不是函数。（在'render(newValue)'中，'render'是Object的一个实例）。

为什么这不起作用？

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 中更改以下内容，所以反过来，从是花括号到没有花括号："

从'../context/appContext.js'导入{UserContext} 到从 '../context/appContext.js'

导入 UserContext

因为 UserContext 是那里的默认导出。但它仍然是一个 React 对象，不是吗？如果我把它放在花括号中，为什么会是 'undefined'？

上下文和提供程序不工作 - 渲染不是函数

Context & Provider not working - render is not a function

reactjs

react-native

render

native