错误：无法读取未定义的属性(读取"get")

Question

我在项目的HomeScreen上出现此错误
我想使用redux对HomeScreen页面的状态执行操作。数据由api(项目数组(提供，然后在屏幕上呈现。在我的网站页面上显示了以上错误
productReducer.js

import { 
PRODUCT_LIST_REQUEST,
PRODUCT_LIST_SUCCESS,
PRODUCT_LIST_FAIL,
PRODUCT_DETAILS_REQUEST,
PRODUCT_DETAILS_SUCCESS,
PRODUCT_DETAILS_FAIL,

} from '../constants/productConstants'
export const productListReducers=(state= { products:[] },action)=>{
switch(action.type)
{
case PRODUCT_LIST_REQUEST:
return { loading:true, products:[]}
case PRODUCT_LIST_SUCCESS:
return {loading:false, products:action.payload.products}
case PRODUCT_LIST_FAIL:
return {loading:false,error:action.payload}
default:
return state
}
}

productAction.js

import { axios } from 'axios'
import { 
PRODUCT_LIST_REQUEST,
PRODUCT_LIST_SUCCESS,
PRODUCT_LIST_FAIL,
PRODUCT_DETAILS_REQUEST,
PRODUCT_DETAILS_SUCCESS,
PRODUCT_DETAILS_FAIL 
} from '../constants/productConstants'
export const listProducts=()=>async(dispatch)=>{ 
try
{
dispatch({type:PRODUCT_LIST_REQUEST})
const { data }= await axios.get('http://127.0.0.1:8000/api/products/')
dispatch({
type:PRODUCT_LIST_SUCCESS,
payload:data
})
}
catch(error){
dispatch({
type:PRODUCT_LIST_FAIL,
payload:error.response && error.response.data.message ? error.response.data.message: error.message,
})
}
}

主页屏幕.js

import React, {useState, useEffect} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col } from 'react-bootstrap'
import Product from '../components/Product'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { listProducts } from '../actions/productActions'
function HomeScreen() {

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

useEffect(()=>{

dispatch(listProducts())  
},[dispatch])

return (
<div>
<h1>Latest Products</h1> 
{loading ? <Loader /> 
: error ?  <Message variant='danger'>{error}</Message> 
: 
(
<Row>
{products.map(product=>(
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product}/>
</Col>
))}
</Row>
)

}          

</div>
)
}
export default HomeScreen

productConstant.js

export const PRODUCT_LIST_REQUEST='PRODUCT_LIST_REQUEST'
export const PRODUCT_LIST_SUCCESS='PRODUCT_LIST_SUCCESS'
export const PRODUCT_LIST_FAIL='PRODUCT_LIST_FAIL'

Answer 1

您需要更改导入axios代码并像这样导入

import axios from 'axios'

而不是

import { axios } from 'axios'