React UseEffect 在頁面刷新時不起作用

Question

我正在使用 useEffect 從我的后端 api 獲取信息。 我正在使用 Redux 並在 useeffect 上調度操作。 起初，它可以工作，但在頁面重新加載后，所有信息都變為 null，我收到此錯誤 TypeError: Cannot read property 'mainImage' of null。 在 redux 開發工具中，它甚至都沒有調用該操作，而我的 redux 存儲 state 它是 Z37A6259CC0C1DAE2B9877A66498。 什么可能是錯誤？ 我的其他組件工作正常，即使在重新加載頁面后我也在其他組件中使用相同的方法。 我什至檢查了我的響應數據是否正在加載。 我什至 console.log('HI') 在使用效果，它沒有顯示

這是我的那個組件

const ProductDetailScreen = ({match,history}) => {
    
    
    const dispatch = useDispatch();
    const {loading,product,error}= useSelector(state=> state.singleProduct)
    
    
   useEffect(()=>{
      dispatch(getProductDetails(match.params.id))
   },[dispatch,match])

   
        
    return (
            
        <div className='my-5 p-3'>
             <Button variant="outline-dark" onClick={()=> history.push('/')}>
         <i className="fas fa-arrow-left"></i> Go Back
        </Button> 
        
        {loading ? <Loader/> : error? <AlertMessage>{error}</AlertMessage>:
        (
            <>
            <Row className='my-4'>
            <Col md={4}>
                <Image style={{width:'90%',height:'auto'}} alt='' fluid src={product.mainImage}/>
            </Col>

            <Col md={4}>
            <ListGroup variant='flush'>
                <ListGroup.Item>
                    <h3>{product.name}</h3>
                </ListGroup.Item>
                <ListGroup.Item>
                    <Rating value={product.ratings} text={`${product.numReviews} reviews`}/>
                </ListGroup.Item>
                <ListGroup.Item>
                    Quantity: {product.quantity}
                </ListGroup.Item>
                <ListGroup.Item>
                    Buyers: {product.sale}
                </ListGroup.Item>
                <ListGroup.Item>
                    <h5>Choose Version :</h5>
                   <ListGroup horizontal>
                   <Row>
                       {product.version.map(pro=>(
                            <Col key={pro._id} className='my-2 d-flex align-items-stretch' md={6}>
                            <ListGroup.Item>
                             <Form.Check defaultChecked type="radio" inline name="group1"  aria-label="radio 1" />
                             <h6>Version: {pro.version}</h6>
                             <h6>Price: ${pro.price}  </h6>
                            </ListGroup.Item>
                            </Col>
                       ))}
                      </Row>
                   </ListGroup>
                </ListGroup.Item>
                 </ListGroup>
                  </Col>
                  </Row>
                  </>
export default ProductDetailScreen

我的減速機

export const getProductFromID = (state={product:null},action)=>{
    switch(action.type){
        default:
        return state

        case GET_PRODUCT_REQUEST:
            return {loading:true}
        case GET_PRODUCT_SUCCESS:
            return{loading:false, product:action.payload}
        case GET_PRODUCT_FAIL:
            return {loading:false,error:action.payload}
    }
}

我的店鋪

const rootReducer= combineReducers({
    productsReducer: getProductsReducer,
    topProducts: getTopProductReducer,
    categories: getCategoriesReducer,
    productCategories : getProductFromCategories,
    singleProduct: getProductFromID
})

const initialState ={};

const middleWare = [thunk];

const store = createStore(rootReducer,initialState, composeWithDevTools(applyMiddleware(...middleWare)))

export default store

我的動作創造者

export const getProductDetails = (id) => async (dispatch) => {
    try {
        dispatch({
            type: GET_PRODUCT_REQUEST
        })

        const res = await axios.get(`/api/products/${id}`)

        dispatch({
            type: GET_PRODUCT_SUCCESS,
            payload: res.data
        })

    } catch (error) {
        dispatch({
            type: GET_PRODUCT_FAIL,
            payload: error.response && error.response.data.message ? error.response.data.message : error.message
        })
    }
}

我的后端 api 沒有任何問題，它在 postman 中正常工作

Answer 1

當您重新加載頁面時，您的 redux state 將被重置，因此在第一次渲染期間，您的產品值為 null 並且您正嘗試從產品訪問mainImage頁面，這會中斷。

要解決此問題，請將減速器中的初始 state 設置為加載為 true

export const getProductFromID = (state={product:null, loading: true},action)=>{
    switch(action.type){
        default:
        return state

        case GET_PRODUCT_REQUEST:
            return {loading:true}
        case GET_PRODUCT_SUCCESS:
            return{loading:false, product:action.payload}
        case GET_PRODUCT_FAIL:
            return {loading:false,error:action.payload}
    }
}