未定义变量导致我的ejs页面无法显示

Question

if 语句中未定义的变量导致我的 ejs 页面无法显示。 当我删除 if 语句时，页面会被渲染并显示，但由于未定义的变量和 if 语句，会发生错误。

我的捐助者发布路线

app.post('/donors', async (req, res) => {
  try {
    const { bloodType, city } = req.body;
    console.log('Blood Type:', bloodType);
    console.log('City:', city);



    console.log('SQL Query:', query);
    console.log('Parameters:', params);

    const donorsResult = await db.query(query, params);
    const donors = donorsResult.rows;

    // Render the donors.ejs view
    res.render('donors.ejs', { blood_type: bloodType, city_name: city, donors: donors, getBloodTypeText: getBloodTypeText });
  } catch (error) {
    console.error('Error fetching data:', error);
    res.status(500).send('Internal Server Error');
  }
});

我的捐助者获取路线

app.get('/donors', async (req, res) => {
  try {
    // Query the database to get distinct blood types
    const bloodTypesResult = await db.query('SELECT DISTINCT blood_type FROM donors');
    const bloodTypes = bloodTypesResult.rows;

    // Query the database to get all cities
   
    const citiesResult = await db.query('SELECT * FROM city');
    // const citiesResult = await db.query('SELECT city_name from donors')
    const cities = citiesResult.rows;

    // Query the database to get a default set of 12 donors
    // Make sure the limit is 12 or a closer number to that amount to display donors informaion by default 
    // prior to the users request
    const defaultDonorsResult = await db.query('SELECT * FROM donors LIMIT 12');
    const defaultDonors = defaultDonorsResult.rows;

    // Render the donors.ejs view and pass the blood types, cities, and default donors as variables
    res.render('donors.ejs', { blood_type: bloodTypes, city: cities, donors: defaultDonors, getBloodTypeText: getBloodTypeText, getCompatibleBloodTypes: getCompatibleBloodTypes});
  } catch (error) {
    console.error('Error fetching data:', error);
    // Handle other errors if needed
    res.status(500).send('Internal Server Error');
  }
});

第二个捐赠者获取渲染页面的路由

app.get('/donors', (req, res) => {
  res.render('donors.ejs', {});
});

第三位捐赠者获得路线

app.get('/views/donors.ejs', (req, res) => {
  res.render('donors.ejs', {});
});

donors.ejs 代码

<div class="container mt-5">
  <div class="row justify-content-center">
    <% if (donors && donors.length > 0) { %>
      <% donors.forEach(donor => { %>
        <div class="col-12 col-sm-6 col-lg-4 mb-4">
          <div class="card" style="background-color: #D27878;">
            <div class="card-body">
              <h5 class="card-title"><%= donor.full_name %></h5>
              <p class="card-text">Blood Type: <%= donor.blood_type %></p>
              <p class="card-text">City: <%= donor.city_name %></p>
              <p class="card-text">Phone: <%= donor.phone_number %></p>
            </div>
          </div>
        </div>
      <% }); %>
    <% } else { %>
      <p>No donors found.</p>
    <% } %>
  </div>
</div>

捐助者变量未在 if 语句之前声明

仅当在 URL 中输入路由时才会显示该页面，但如果单击按钮将用户定向到 Donors.ejs 页面，则会出现以下错误

ReferenceError: C:\Users\kinga\Downloads\BackendGraduationProject\HopeDrops website\views\donors.ejs:98
    96| <div class="container mt-5">

    97|   <div class="row justify-content-center">

 >> 98|     <% if (donors && donors.length > 0) { %>

    99|       <% donors.forEach(donor => { %>

    100|         <div class="col-12 col-sm-6 col-lg-4 mb-4">

    101|           <div class="card" style="background-color: #D27878;">


donors is not defined

Answer 1

是的，因为你的第二个和第三个片段没有传递

donors

变量，所以错误是完全正确的。如果需要

donors

，那么最好每次都提供>

app.get('/donors', (req, res) => {
  res.render('donors.ejs', {donors: 0});
});

app.get('/views/donors.ejs', (req, res) => {
  res.render('donors.ejs', {donors: 0});
});

Answer 2

在

res.render('donors.ejs', {})

中，没有变量传递到视图（

{}

为空）。所以视图中没有定义

donors

变量，你永远不会传递它。

也许你应该通过

undefined

来代替：

res.render('donors.ejs', { donors: undefined })

您也可能对未传递的其他值有同样的问题。