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

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

这是Homescreen.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; 

还原常数

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;      
    }
}

---

问题是您正在从“react-redux/lib/hooks/useSelector”而不是“react-redux”导入钩子

而不是：

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

使用：

---

问题是您正在从“react-redux/lib/hooks/useSelector”而不是“react-redux”导入钩子

而不是：

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

使用：

---

非常感谢。真的不是一个直截了当的问题，谢谢！真的不是一个简单的问题

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;      
    }
}

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';