错误：找不到反应冗余上下文值;请确保组件包装在<Provider>

Question

拜托，我是新手。我正在尝试使用反应公理和钩子从后端渲染数据。我不断收到此错误消息，并确保应用程序已包装在提供程序中。在导出之前，我是否必须将主屏幕组件包装在提供程序中？谢谢。

这是主屏幕.js ;显示数据

import React, { useEffect} from 'react';
import {Link} from 'react-router-dom'
import { useSelector } from 'react-redux/lib/hooks/useSelector';
import { useDispatch } from 'react-redux/lib/hooks/useDispatch';
import { listProducts } from '../actions/productActions';
import {Provider }from 'react-redux'; 
function HomeScreen (props) {

const productList = useSelector(state => state.productList); 
const { products, loading, error} = productList;
const dispatch = useDispatch();
useEffect(()=>{
dispatch(listProducts()); 

return ()=> {
//
};
}, [ dispatch ])
return loading? <div> loading... </div>:
error? <div> {error} </div>:
(
<ul className="products"> 
{
products.map(product => 
<li  key = {product._id} >
<div className="product">
<Link to= {'/product/'+ product._id}> 
<img src={product.image} className="product-image" alt="product"></img>
</Link> 
<div className="product-name"> 
<Link to= {'/product/'+ product._id}> {product.name} </Link> 
</div>
<div className="product-brand"> {product.brand}</div>
<div className="product-price"> ${product.price}</div>
<div className="rating"> {product.price} Stars ({product.numReviews} Reviews)</div>
</div>
</li>
)
}
</ul>
)
}

export default   HomeScreen; 

这是应用程序;

import React from 'react';
import {Link, BrowserRouter ,Route } from 'react-router-dom'
import './App.css';
import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'
import {Provider }from 'react-redux'; 
function App() {
const openMenu = ()=>{
document.querySelector(".sidebar").classList.add("open")
}
const closeMenu = ()=>{
document.querySelector(".sidebar").classList.remove("open")
}
return (
<BrowserRouter> 
<div className="grid-container">
<header className="header">
<div className="brand"> 
<button onClick={openMenu}>
&#9776;
</button>
<Link to = "/">Amazone</Link>
</div>
<div className="header-links"> 
<a href="/#"> Cart </a>
<a href="/#"> SigniN</a>
</div>
</header>
<aside className="sidebar"> 
<h3> Shopping Categories</h3>
<button className="sidebar-close-button" onClick={closeMenu}>X </button>
<li>
<a href="index.html"> Pants</a>
</li>
<li>
<a href="index.html"> Shirts</a>
</li>
</aside>
<main className="main">
<div className="content">
<Route path="/product/:id" component = {ProductScreen} /> 
<Route path="/" exact = {true} component = {HomeScreen} />   

</div>
</main>
<footer className="footer">
All Rights Reserved
</footer>
</div>
</BrowserRouter>
);
}
export default App;

这就是指数.js

import React from 'react';
import {Provider }from 'react-redux';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import allreducer from './allreducer.js'
import thunk from 'redux-thunk';
import {createStore, applyMiddleware, compose} from 'redux';

// to see the action dispatched in the state at the browser
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const initialState = {};
//Thunk is a middleware that allows operation of async in the action
const store = createStore(allreducer, initialState, composeEnhancer(applyMiddleware(thunk)));
ReactDOM.render(
<Provider store={store}> 
<App />
</Provider>
,
document.getElementById('root')
);
serviceWorker.unregister();

减速器：

import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, PRODUCT_DETAILS_FAIL } from "../constants/productConstants";
//Reducers 
function productListReducer (state = {product: []}, action){
switch(action.type){
case PRODUCT_LIST_REQUEST:
return {loading: true};
case PRODUCT_LIST_SUCCESS:
return {loading: false, products: action.payload}
case PRODUCT_LIST_FAIL:
return {loading:false, error: action.payload}
default:
return state;      
}
}

减速器常数;

export const PRODUCT_LIST_REQUEST = 'PRODUCT_LIST_REQUEST';
export const PRODUCT_LIST_SUCCESS = 'PRODUCT_LIST_SUCCESS';
export const PRODUCT_LIST_FAIL = 'PRODUCT_LIST_FAIL';
export const PRODUCT_DETAILS_REQUEST = 'PRODUCT_DETAILS_REQUEST';
export const PRODUCT_DETAILS_SUCCESS = 'PRODUCT_DETAILS_SUCCESS';
export const PRODUCT_DETAILS_FAIL = 'PRODUCT_DETAILS_FAIL';

减速器动作;

import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, PRODUCT_DETAILS_FAIL } from "../constants/productConstants";
//Reducers 
function productListReducer (state = {product: []}, action){
switch(action.type){
case PRODUCT_LIST_REQUEST:
return {loading: true};
case PRODUCT_LIST_SUCCESS:
return {loading: false, products: action.payload}
case PRODUCT_LIST_FAIL:
return {loading:false, error: action.payload}
default:
return state;      
}
}

Answer 1

问题是你从'react-redux/lib/hooks/useSelector'而不是'react-redux'导入你的钩子。

而不是：

import { useSelector } from 'react-redux/lib/hooks/useSelector';
import { useDispatch } from 'react-redux/lib/hooks/useDispatch';

用：

import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';