Question

曾经尝试过很多事情，但是因为我无法终生工作。一直在查看各种上下文教程，但没有。你能帮我吗？

App.js

import azure.cognitiveservices.speech as speechsdk


var = lambda evt: print('ss: {}'.format(evt.result.text))
speech_recognizer.recognizing.connect(var)

appContext.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>
  )
}

SignupScreen.js

import React, { createContext } from 'react'

const UserContext = React.createContext()

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

export default UserContext

TypeError：render不是函数。（在“ 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

使用花括号似乎可以解决问题！感谢Shubham！

我还必须在SignupScreen中更改以下内容，反之亦然，从yes-curly大括号改为no-curly大括号：“

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

导入UserContext

因为UserContext是那里的默认导出。但这仍然是一个React对象，不是吗？如果将其放在花括号中，为什么会是“未定义”？

上下文和提供程序不起作用-渲染不是功能

2 个答案: