Question

嗨，伙计们，我有一个问题，我开始将React Native与Redux一起使用，并且出现此错误：

不变违反：不变违反：在以下位置找不到“存储” “ Connect（DeckList）”的上下文。将根组件包装在或将自定义React上下文提供程序传递给和相应的React上下文使用者到Connect（DeckList）连接选项。

我使用expo制作了react native应用，而我使用的是React Navigation v3。

我想访问DeckList.js中的商店。

这是我的App.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
  createBottomTabNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";
import { white, purple } from "./utils/colors";
import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";

import DeckList from "./components/DeckList";
import AddDeck from "./components/AddDeck";
import DeckView from "./components/DeckView";
import { Provider, connect } from "react-redux";
import { createStore } from "redux";
import reducer from "./reducers";


export default function App() {
  const store = createStore(reducer);
  return (
    <Provider store={store}>
      <View style={styles.container}>
        {" "}
        <AppContainer />{" "}
      </View>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

const Home = createBottomTabNavigator({
  DeckList: {
    screen: DeckList,
    navigationOptions: {
      tabBarLabel: "Home",
      tabBarIcon: ({ tintColor }) => (
        <MaterialCommunityIcons name="cards" size={24} color={tintColor} />
      )
    }
  },
  AddDeck: {
    screen: AddDeck,
    navigationOptions: {
      tabBarLabel: "ADD",
      tabBarIcon: ({ tintColor }) => (
        <FontAwesome name="plus-square" size={24} color={tintColor} />
      )
    }
  }
});

const MainNavigator = createStackNavigator({
  DeckList: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: "Home",
      tabBarIcon: ({ tintColor }) => (
        <MaterialCommunityIcons name="cards" size={24} color={tintColor} />
      )
    }
  },
  DeckView: {
    screen: DeckView,
    navigationOptions: {
      title: "Deck Indo",
      headerTinitColor: white,
      headerStyle: {
        backgroundColor: purple
      }
    }
  }
});
const AppContainer = createAppContainer(MainNavigator);

这是DeckList.js

import React, { Component } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import { getData } from "../utils/api";
import { connect } from "react-redux";

class DeckList extends Component {
  state = {};
  render() {
    const decks = getData();

    return (
      <View style={styles.container}>
        {Object.keys(decks).map((deck, i) => {
          const { title, questions } = decks[deck];
          return (
            <View key={i}>
              <Text>{title}</Text>
              <Text>{questions.length}</Text>
              <Button
                title="View Deck"
                onPress={() =>
                  this.props.navigation.navigate("DeckView", { entryId: deck })
                }
              />
            </View>
          );
        })}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

const mapStateToProps = state => {
  return {
    decks: state
  };
};
export default connect(mapStateToProps)(DeckList);

Answer 1

您需要在render函数之外创建商店：

const store = createStore(reducer);

export default function App() {

  return (
    <Provider store={store}>
      <View style={styles.container}>
        {" "}
        <AppContainer />{" "}
      </View>
    </Provider>
   );
}

React Native-在“ Connect（DeckList）”的上下文中找不到“存储”

1 个答案: