未处理拒绝（TypeError）：无法读取未定义的属性'image'

Question

我的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。

Answer 1

正如我所看到的，您正在过滤领导者并在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值。取决于您。