React Native 在使用上下文 API 时呈现白屏

Question

我有一个问题。 当我不包装身份验证提供程序时，一切都很好。 没有任何问题。 但是当我包装身份验证提供程序时，我的应用程序呈现白屏@@。 所以我检查终端，看到捆绑包未运行(通常渲染时我们可以看到捆绑包加载和运行...... 我如何解决这个问题？ 非常感谢。

创建数据上下文.js

import React, { useReducer } from 'react';
export default (reducer, actions, defaultValue) => {
const Context = React.createContext();
const Provider = ({ chilrden }) => {
const [state, dispatch] = useReducer(reducer, defaultValue);
const boundActions = {};
for (let key in actions) {
boundActions[key] = actions[key](dispatch);
}
return (
<Context.Provider value={{ state, ...boundActions }}>
{chilrden}
</Context.Provider>
);
};
return { Context, Provider };
};

身份验证上下文.js

import createDataContext from './createDataContext';
const authReducer = (state, action) => {
switch (action.type) {
default:
return state;
}
};
export const { Provider, Context } = createDataContext(
authReducer,
{},
{ isSignedIn: true }
);

应用.js

import React from 'react';
import {Provider as AuthProvider} from './src/context/AuthContext';
import {
createAppContainer,
createSwitchNavigator,
} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';

import AccountScreen from './src/screens/AccountScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import TrackListScreen from './src/screens/TrackListScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';

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(
<AuthProvider>
<App/>
</AuthProvider>
);
};

Answer 1

你在拼写上犯了错误，只要检查你的代码中的拼写，你会发现{chilrden}

Answer 2

我相信每次导致问题的应用程序渲染时都会重新创建boundActions。您应该尝试使用useMemo来缓存boundActions。它可能会有所帮助

Answer 3

快速修复： in createDataContext.js (const Provider = ({children})( 使用props而不是{children}作为{props.children}传递

我的快速解决方案：

import React, { useReducer } from 'react';
export default (reducer, actions, defaultValue) => {
const Context = React.createContext();
const Provider = props => {
const [state, dispatch] = useReducer(reducer, defaultValue);
const boundActions = {};
for (let key in actions) {
boundActions[key] = actions[key](dispatch);
}
console.log(props.children);
return (
<Context.Provider value={{ state, ...boundActions }}>
{props.children}
</Context.Provider>
);
};
return { Context, Provider };
};