Question

未处理的拒绝（TypeError）：无法读取未定义的属性“图像”

2019-11-08

1021

javascript reactjs

我对我的React应用程序有问题。首先，它在键入 纱线启动 后运行良好。但是，我是故意与本地JSON服务器断开连接的，以查看生成什么错误。预计会看到这样的东西。

，我在浏览器的控制台中看到了这一点。

338398579
  
  
   这是我定义在还原器上发送的操作的方式。
  
  490298519
  
   和我的homecomponent
  
  330618225
 <

< P>这是我的项目

/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)

您还可以渲染占位符组件，而不是我写的空值。这取决于你。

Answer 2

RenderCard 组件（在 Home 组件中）中 errMess 的正确 props 是 props.dishErrMess 而不是 props.dishesErrMess 。实际上在 MainComponent 中 <Home dishErrMess={this.props.dishes.errMess}/>

Answer 3

这属于Coursera的React全栈开发课程。

启动MongoDB服务器。
然后启动您在服务器端开发中实现的REST API服务器，使用NodeJS，Express和MongoDB。
然后通过npm start或yarn start启动 ConFusion-React （必须包含所有相关的节点模块）。

如果此错误仍然存在，请执行以下操作：

启动您的REST API服务器和MongoDB服务器
打开Postman并以 admin 身份登录
然后使用您从资源中下载的 db.json 文件并插入所有在相应的端点上查看菜肴、领导者、促销和用户，并使用不同的命令在 MongoDB shell 上进行检查。
然后执行我上面讨论过的所有初始过程。

如果这解决了您的问题，请点赞，否则请发表评论。