Reactjs useDispatch（）错误：找不到react-redux上下文值；请确保组件包装在<；供应商>；

我正在尝试使用React Redux库，但标题上出现了错误。我用Provider包装了我的组件，但只有在实现useDispatch（）钩子的情况下，我仍然会得到错误

在我添加useDispatch（）行之前，该应用程序运行良好。关于分派函数的其余行可以删除，我仍然会得到相同的错误

如果你能帮助我，我将非常感激。谢谢

这是我的密码：

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import Navigator from './navigation/Navigator';

import React, {useEffect, useState, useCallback} from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';

import {createStore, combineReducers} from 'redux';
import {Provider, useDispatch} from 'react-redux';
import dataReducer from './store/reducers/dataReducer';
import {CONSTANTS} from './constants/constants';
import {saveInitialData} from './store/actions/dataActions';

const App = () => {
  const [fetched, setFetched] = useState(initialState);

  const dispatch = useDispatch();

  const saveInitialDataHandler = useCallback(data => {
    dispatch(saveInitialData(data));
    callback;
  }, []);

  const rootReducer = combineReducers({
    content: dataReducer,
  });

  const store = createStore(rootReducer);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    fetch(CONSTANTS.database)
      .then(response => response.json())
      .then(responseJSON => {
        setFetched(true);
        saveInitialDataHandler(responseJSON);
      });
  };

  if (!fetched) {
    return (
      <Provider store={store}>
        <View stlye={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <Text></Text>
        </View>
      </Provider>
    );
  } else {
    return (
      <Provider store={store}>
        <NavigationContainer>
          <SafeAreaView style={styles.SafeAreaView}>
            <Navigator></Navigator>
          </SafeAreaView>
        </NavigationContainer>
      </Provider>
    );
  }
};

const styles = StyleSheet.create({
  SafeAreaView: {flex: 1},
});

export default App;

导入“反应本机手势处理程序”；
从'@react-navigation/native'导入{NavigationContainer}；
从“./navigation/Navigator”导入导航器；
从“React”导入React，{useffect，useState，useCallback}；
从“react native”导入{SafeAreaView，样式表，文本，视图}；
从'redux'导入{createStore，combinereducer}；
从“react redux”导入{Provider，useDispatch}；
从“/store/reducers/dataReducer”导入dataReducer；
从“./CONSTANTS/CONSTANTS”导入{CONSTANTS}；
从“./store/actions/dataActions”导入{saveInitialData}；
常量应用=（）=>{
const[fetched，setFetched]=useState（initialState）；
const dispatch=usedpatch（）；
const saveInitialDataHandler=useCallback（数据=>{
调度（保存初始数据（数据））；
回调；
}, []);
const rootReducer=combinereducer({
内容：dataReducer，
});
const store=createStore（rootReducer）；
useffect（（）=>{
fetchData（）；
}, []);
常量fetchData=（）=>{
获取（常量.数据库）
.then（response=>response.json（））
.然后（responseJSON=>{
setFetched（true）；
saveInitialDataHandler（responseJSON）；
});
};
如果（！已获取）{
返回(
);
}否则{
返回(
);
}
};
const styles=StyleSheet.create({
安全区域视图：{flex:1}，
});
导出默认应用程序；

App

必须包装在provider中，因为您正在provider中使用

useDispatch

。现在只是个孩子<代码>提供程序设置上下文，以便只有其子级可以访问它，而不是父级

一种解决方案是为其创建包装器组件：

const-AppWrapper=（）=>{
const store=createStore（rootReducer）；
返回(
//设置上下文
//现在应用程序可以访问上下文
)
}
常量应用=（）=>{
const dispatch=usedpatch（）；//有效！
...

发生在我身上，当我将React组件作为函数调用时，没有将其用作虚拟dom，Comp被单独调用，而不是作为某个元素的子元素呈现

function Comp() {
  const a = useSelector(selectA); // throws error
}
Comp();

所以在我的例子中，解决方案是调用Comp和一个组件，而不是函数

---

i、 e

我在react原生应用程序的相同index.js文件中执行了此操作。 这样，您就不必导出和添加另一个文件，而只需使用提供商包装应用程序

const ReduxProvider = () => {
    return(
        <Provider store={store}>
            <App />
        </Provider>
    )
}

AppRegistry.registerComponent(appName, () => ReduxProvider);

const ReduxProvider=（）=>{
返回(
)
}
注册表组件（appName，（）=>ReduxProvider）；

可能您已将提供程序导入App.js文件。提供程序需要导入index.js文件

/*index.js*/
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store/reduxStore';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

    ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

/*index.js*/
从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“./store/reduxStore”导入{store}；
导入“./index.css”；
从“./App”导入应用程序；
从“/reportWebVitals”导入reportWebVitals；
ReactDOM.render(
,
document.getElementById（'root'））
);

谢谢，它很有效。对于任何使用它的人，还记得导出AppWrapper，而不是你的应用程序！基本上确保用Provider not index.js文件包装你的应用程序组件，该文件将应用程序组件装载到DOM中。您好，我遇到了同样的问题，当我尝试此方法时，我收到了“ReferenceError:找不到variable:rootReducer”

rootReducer

是OP给它们的组合还原程序的名称，根据您设置和导入还原程序的方式，您的名称可能会有所不同。这是否也适用于应用加载？那么，解决方案是什么？