我的React应用程序有问题。首先,键入yarn start后,它运行良好。但是,我故意从本地json服务器断开连接,以查看生成了什么错误。预计会看到类似这样的内容。
相反,我在浏览器的控制台中看到了。
Unhandled Rejection (TypeError): Cannot read property 'image' of undefined
RenderCard
src/components/HomeComponent.js:28
25 | return(
26 | <Card>
27 | <CardBody>
> 28 | <CardImg src={baseUrl + item.image} alt={item.name} />
| ^ 29 | <CardTitle>{item.name}</CardTitle>
30 | {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle>: null}
31 | <CardText>{item.description}</CardText>
View compiled
▶ 23 stack frames were collapsed.
(anonymous function)
src/redux/ActionCreators.js:31
28 | error => {
29 | var errorMessage = new Error(error.errorMessage);
30 | throw errorMessage;
> 31 | }
| ^ 32 | )
33 | .then(response => response.json())
34 | .then(dishes => dispatch(addDishes(dishes)))
这是我定义在减速器上发送的动作的方式。
import * as ActionTypes from './ActionTypes';
import { baseUrl } from '../shared/baseUrl';
export const addComment = (dishId, rating, author, comment) => ({
type: ActionTypes.ADD_COMMENT,
payload: {
dishId: dishId,
rating: rating,
author: author,
comment: comment
}
});
export const fetchDishes = () => (dispatch) => {
dispatch(dishesLoading(true));
return fetch(baseUrl + 'dishes')
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errorMessage = new Error(error.errorMessage);
throw errorMessage;
}
)
.then(response => response.json())
.then(dishes => dispatch(addDishes(dishes)))
.catch(error => dispatch(dishesFailed(error.message)))
}
export const dishesLoading = () => (dispatch) => ({
type: ActionTypes.DISHES_LOADING
});
export const dishesFailed = (errmess) => ({
type: ActionTypes.DISHES_FAILED,
payload: errmess
});
export const addDishes = (dishes) => ({
type: ActionTypes.ADD_DISHES,
payload: dishes
});
export const fetchComments = () => (dispatch) => {
return fetch(baseUrl + 'comments')
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errorMessage = new Error(error.errorMessage);
throw errorMessage;
}
)
.then(response => response.json())
.then(comments => dispatch(addComments(comments)))
.catch(error => dispatch(commentsFailed(error.message)))
}
export const commentsFailed = (errmess) => ({
type: ActionTypes.COMMENTS_FAILED,
payload: errmess
});
export const addComments = (comments) => ({
type: ActionTypes.ADD_COMMENTS,
payload: comments
});
export const fetchPromos = () => (dispatch) => {
dispatch(promosLoading(true));
return fetch(baseUrl + 'promotions')
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errorMessage = new Error(error.errorMessage);
throw errorMessage;
}
)
.then(response => response.json())
.then(promos => dispatch(addPromos(promos)))
.catch(error => dispatch(promosFailed(error.message)))
}
export const promosLoading = () => (dispatch) => ({
type: ActionTypes.PROMOS_LOADING
});
export const promosFailed = (errmess) => ({
type: ActionTypes.PROMOS_FAILED,
payload: errmess
});
export const addPromos = (promos) => ({
type: ActionTypes.ADD_PROMOS,
payload: promos
});
和我的HomeComponent
function RenderCard({item,isLoading,errMess}){
if (isLoading){
return(
<div className="container">
<div className="row">
<Loading />
</div>
</div>
);
}
if(errMess){
return(
<div className="container">
<div className="row">
<h4>{errMess}</h4>
</div>
</div>
);
} else
return(
<Card>
<CardBody>
<CardImg src={baseUrl + item.image} alt={item.name} />
<CardTitle>{item.name}</CardTitle>
{item.designation ? <CardSubtitle>{item.designation}</CardSubtitle>: null}
<CardText>{item.description}</CardText>
</CardBody>
</Card>
);
}
function Home(props){
return(
<div className="container">
<div className="container">
<div className="row align-items-start">
<div className="col-12 col-md-4 m-1">
<RenderCard item={props.dish}
isLoading={props.dishesLoading}
errMess={props.dishesErrMess}
/>
</div>
<div className="col-12 col-md m-1">
<RenderCard item={props.promotion} isLoading={props.promoLoading} errMess={props.promoErrMess} />
</div>
<div className="col-12 col-md m-1">
<RenderCard item={props.leader} />
</div>
</div>
</div>
</div>
);
}
export default Home;
这是我的项目
https://github.com/theo82/Front-End-Web-Development-With-React
如何解决该错误?谢谢,Theo。
正如我所看到的,您正在过滤领导者并在MainComponent.js第53行中传递第一个索引,该索引可能始终是未定义的。您应该检查该值是否存在。
为此,将HomeComponent.js第25行替换为以下代码:
return (item?<Card>
<CardBody>
<CardImg src={baseUrl + item.image} alt={item.name} />
<CardTitle>{item.name}</CardTitle>
{item.designation ? <CardSubtitle>{item.designation}</CardSubtitle>: null}
<CardText>{item.description}</CardText>
</CardBody>
</Card>:null)
也可以渲染一个占位符组件,而不是我编写的null值。取决于您。