Ошибка инвариантного нарушения при использовании Redux с реактивной - PullRequest
Новая
       48

Ошибка инвариантного нарушения при использовании Redux с реактивной

0 голосов
/ 28 октября 2018

Когда я запускаю свое реагирующее приложение 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;

1 Ответ

0 голосов
/ 28 октября 2018

Этот раздел вашего кода неправильный! 

import View from 'react-native'

Измените его на: 

import { View } from 'react-native'

Надеюсь, это сработает:)

...