英文:
Error: Cannot read properties of null (reading 'name') when using ejs with nodejs
问题
这个错误发生在我使用ejs时，否则在使用fetch请求或postman请求时都正常工作。它仅在使用品牌数据时发生，当我使用ejs时，它会在第一个请求中进行双重请求，第一个请求将数据发送到客户端，但在第二个请求中发送null，这是错误发生的原因，但不知道为什么会发送null并进行双重请求。
后端
const brandId = req.params.id;
const brand = await Brand.findOne({ _id: brandId });
const vehicles = await Vehicle.find({ brand: brandId });
console.log(brand);
res.render("brand", { brand, vehicles });
前端
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/_head'); %>
<title>Home</title>
</head>
<body>
<%- include('partials/_header'); %>
<div class="container">
<main>
<section class="showcase">
<div class="showcase-brand">
<div class="brand-title"><%= brand.name %> vehicles</div>
<div class="brand-logo">
<img src="<%= brand.image %>" alt="brand-logo" />
</div>
</div>
</section>
<section class="brand-vehicles">
<div class="brand-vehicles-list">
<% vehicles.forEach(vehicle => { %>
<a href="#" class="brand-vehicle">
<img
src="https://s7d1.scene7.com/is/image/hyundai/2023-sonata-hybrid-limited-ultimate-red-019:Vehicle-Carousel?fmt=webp-alpha"
alt="vehicle-img"
/>
<p><%= vehicle.name %></p>
</a>
<% }) %>
</div>
</section>
</main>
<%- include('partials/_sidebar'); %>
</div>
</body>
</html>
控制台日志
Server is running on port:3000...
`{
_id: 'tesla',
name: 'tesla',
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/800px-Tesla_Motors.svg.png',
createdAt: 2023-05-23T08:21:27.743Z,
updatedAt: 2023-05-23T08:21:27.743Z,
__v: 0
}
null
TypeError: C:\Users\winne\Documents\wikiwheels\views\brand.ejs:13
11| <section class="showcase">
12| <div class="showcase-brand">
>> 13| <div class="brand-title"><%= brand.name %> vehicles</div>
14| <div class="brand-logo">
15| <img src="<%= brand.image %>" alt="brand-logo" />
16| </div>
Cannot read properties of null (reading 'name')
at eval ("C:\Users\winne\Documents\wikiwheels\views\brand.ejs":18:32)
at brand (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:703:17)
at tryHandleCache (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:274:36)
at exports.renderFile [as engine] (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:491:10)
at View.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\application.js:657:10)
at Function.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\application.js:609:3)
at ServerResponse.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\response.js:1039:7)
at getBrand (C:\Users\winne\Documents\wikiwheels\controller\brand.js:23:7)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
path: 'C:\Users\winne\Documents\wikiwheels\views\brand.ejs'
}
null
TypeError: C:\Users\winne\Documents\wikiwheels\views\brand.ejs:13
11| <section class="showcase">
12| <div class="showcase-brand">
>> 13| <div class="brand-title"><%= brand.name %> vehicles</div>
14| <div class="brand-logo">
15| <img src="<%= brand.image %>" alt="brand-logo" />
16| </div>
Cannot read properties of null (reading 'name')
at eval ("C:\Users\winne\Documents\wikiwheels\views\brand.ejs":18:32)
at brand (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:703:17)
at tryHandleCache (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:274:36)
at exports.renderFile [as engine] (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:491:10)
at View.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\application.js:657:10)
at Function.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\application.js:609:3)
at ServerResponse.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\response.js:1039:7)
at getBrand (C:\Users\winne\Documents\wikiwheels\controller\brand.js:23:7)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
path: 'C:\Users\winne\Documents\wikiwheels\views\brand.ejs'
}`
英文:
This error occurs when I'm using ejs, otherwise it's working fine with fetch request or postman request. it occurs only with brand data, when I'm using ejs it's making double request in first request it's sending data to client but in second request it's sending null, that is the reason error occurs but don't know why it' sending null and making double requests.
backend
const brandId = req.params.id;
const brand = await Brand.findOne({ _id: brandId });
const vehicles = await Vehicle.find({ brand: brandId });
console.log(brand);
res.render("brand", { brand, vehicles });
front end
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/_head'); %>
<title>Home</title>
</head>
<body>
<%- include('partials/_header'); %>
<div class="container">
<main>
<section class="showcase">
<div class="showcase-brand">
<div class="brand-title"><%= brand.name %> vehicles</div>
<div class="brand-logo">
<img src="<%= brand.image %>" alt="brand-logo" />
</div>
</div>
</section>
<section class="brand-vehicles">
<div class="brand-vehicles-list">
<% vehicles.forEach(vehicle => { %>
<a href="#" class="brand-vehicle">
<img
src="https://s7d1.scene7.com/is/image/hyundai/2023-sonata-hybrid-limited-ultimate-red-019:Vehicle-Carousel?fmt=webp-alpha"
alt="vehicle-img"
/>
<p><%= vehicle.name %></p>
</a>
<% }) %>
</div>
</section>
</main>
<%- include('partials/_sidebar'); %>
</div>
</body>
</html>
console log
Server is running on port:3000...
`{
_id: 'tesla',
name: 'tesla',
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/800px-Tesla_Motors.svg.png',
createdAt: 2023-05-23T08:21:27.743Z,
updatedAt: 2023-05-23T08:21:27.743Z,
__v: 0
}
null
TypeError: C:\Users\winne\Documents\wikiwheels\views\brand.ejs:13
11| <section class="showcase">
12| <div class="showcase-brand">
>> 13| <div class="brand-title"><%= brand.name %> vehicles</div>
14| <div class="brand-logo">
15| <img src="<%= brand.image %>" alt="brand-logo" />
16| </div>
Cannot read properties of null (reading 'name')
at eval ("C:\\Users\\winne\\Documents\\wikiwheels\\views\\brand.ejs":18:32)
at brand (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:703:17)
at tryHandleCache (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:274:36)
at exports.renderFile [as engine] (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:491:10)
at View.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\application.js:657:10)
at Function.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\application.js:609:3)
at ServerResponse.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\response.js:1039:7)
at getBrand (C:\Users\winne\Documents\wikiwheels\controller\brand.js:23:7)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
path: 'C:\\Users\\winne\\Documents\\wikiwheels\\views\\brand.ejs'
}
null
TypeError: C:\Users\winne\Documents\wikiwheels\views\brand.ejs:13
11| <section class="showcase">
12| <div class="showcase-brand">
>> 13| <div class="brand-title"><%= brand.name %> vehicles</div>
14| <div class="brand-logo">
15| <img src="<%= brand.image %>" alt="brand-logo" />
16| </div>
Cannot read properties of null (reading 'name')
at eval ("C:\\Users\\winne\\Documents\\wikiwheels\\views\\brand.ejs":18:32)
at brand (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:703:17)
at tryHandleCache (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:274:36)
at exports.renderFile [as engine] (C:\Users\winne\Documents\wikiwheels\node_modules\ejs\lib\ejs.js:491:10)
at View.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\application.js:657:10)
at Function.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\application.js:609:3)
at ServerResponse.render (C:\Users\winne\Documents\wikiwheels\node_modules\express\lib\response.js:1039:7)
at getBrand (C:\Users\winne\Documents\wikiwheels\controller\brand.js:23:7)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
path: 'C:\\Users\\winne\\Documents\\wikiwheels\\views\\brand.ejs'
}`
答案1
得分: 0
错误通常发生在我们在单个入口点调用多个路由时，如果你不相信的话，只需测试注释掉其他路由，然后相同的路由将正常工作。如果你正在使用REST API，请确保仔细检查所有路由，可能在某些地方你正在使用相同的入口点调用多个路由。
英文:
The error typically occurs when we call multiple routes at single entry points, if you don't believe then just for testing comment the other routes then the same route will work fine. If you're using restAPI then make sure double check all routes may be somewhere you're calling multiple routes with the same entry point.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论