获取变量未定义错误，尽管已定义。使用 EJS 和 NodeJs

Question

    38|         <h2 class="card-activity">
    39|           <!-- Show Activity -->
 >> 40|           <%= data.activity %>
    41|         </h2>
    42|         <div class="card-info">
    43|           <span class="card-type">

data is not defined

刷新并重试多次后，问题得到解决，但为什么我会遇到此错误？

index.js：

app.get("/", async (req, res) => {
  try {
    const response = await axios.get("https://bored-api.appbrewery.com/random");
    const result = response.data;
    res.render("index.ejs", { data: result });
    //res.locals = {data: {}}
  } catch (error) {
    console.error("Failed to make request:", error.message);
    res.render("index.ejs", {
      error: error.message,
    });
  }
});

index.ejs：

<div class="card-info">
          <span class="card-type">
            <!-- Show Activity type -->
            <%= data.type %>
          </span>
          <span class="card-participants">
            <!-- participants: Show participant number -->
            <%= data.participants %>
            <span class="card-number"></span>
          </span>
        </div>

刷新并重试多次后，问题得到解决，但为什么我会遇到此错误？ 请建议可以做什么。

Answer 1

但是为什么我会遇到这个错误？

因为

data

没有定义。请注意，您有时为视图定义它：

res.render("index.ejs", { data: result });

并且有时不要：

res.render("index.ejs", {
  error: error.message,
});

两者的区别在于是否发生异常。因此所描述的行为表明发生了异常。

由于

data

仅有条件地存在，因此视图不能假设它会存在。当它不存在时，您可以使用可选链接来优雅地处理：

<h2 class="card-activity">
  <!-- Show Activity -->
  <%= data?.activity %>
</h2>

或者也许只渲染视图的整个部分（如果存在）：

<% if(data){ %>
  <!-- All of the view that uses data goes here -->
<% } %>

（至于你如何处理

error

值，那取决于你。）