Question

当我在手机上运行React React Native＆Expo应用程序时，显示以下错误：

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。您可能忘记了从定义文件中导出组件。

代码是：

import React from 'react'
import View from 'react-native'

import { Provider } from "react-redux";
import configureStore from "./redux/store";
const { store } = configureStore();


export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <View>
          ...
        </View>    
      </Provider>
    );
  }
}

文件./redux/store是：

import { applyMiddleware, createStore } from "redux";
import { persistStore, persistCombineReducers } from "redux-persist";
import storage from "redux-persist/lib/storage";
import thunk from "redux-thunk";
import user from "./userActions";

const middlewares = [thunk];

const persistConfig = {
  key: "root",
  storage
};

const reducer = persistCombineReducers(persistConfig, {
  user
});

const configureStore = () => {
  let store = createStore(reducer, applyMiddleware(...middlewares));
  let persistor = persistStore(store);
  return { store, persistor };
};

export default configureStore;

我正在使用的依赖项是：

"@babel/core": "^7.1.2",
"eslint": "^5.6.0",
"expo": "^30.0.1",
"native-base": "^2.8.1",
"react": "^16.5.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
"react-redux": "^5.1.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"

我在哪里错了？

更新：更改了App.js代码即可解决此问题。新代码是

import React from "react";
import { AppLoading } from "expo";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/es/integration/react";
import configureStore from "./redux/configureStore";

import AppContainer from "./components/AppContainer";

const { persistor, store } = configureStore();

class App extends React.Component {
  state = {
    isLoadingComplete: false
  };

  render() {
    const { isLoadingComplete } = this.state;
    if (!isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    }
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <AppContainer />
        </PersistGate>
      </Provider>
    );
  }

  _handleLoadingError = error => {
    console.log(error);
  };

  _handleFinishLoading = async () => {
    this.setState({
      isLoadingComplete: true
    });
  };
}

export default App;

Answer 1

这部分代码不正确！

import View from 'react-native'

将其更改为此：

import { View } from 'react-native'

我希望这会起作用：）

将Redux与react-native一起使用时发生不变违规错误

1 个答案: