时间戳

首页 > 解决方案 > 数组到达迭代结束时无法读取未定义的属性“用户名”

javascript - 数组到达迭代结束时无法读取未定义的属性“用户名”

问题描述

我正在尝试制作一个动态的推荐评论页面，在您单击箭头后显示新评论。

我不明白为什么单击数组后，它会推送“未捕获的类型错误：无法读取未定义的属性'userName'”的错误

我尝试过使用 users.length - 1，但这仍然不起作用。

谢谢

const users = [
  {
    userAvatar: "./avatar1.png",
    userName: "Rego",
    userStars: "*****",
    userReviews: "Awesome company!",
  },
  {
    userAvatar: "./avatar2.png",
    userName: "Jim",
    userStars: "***",
    userReviews: `10/10 Loved it !`,
  },
  {
    userAvatar: "./avatar1.png",
    userName: "Jerry",
    userStars: "****",
    userReviews: `Would recommend to my friends`,
  },
  {
    userAvatar: "./avatar3.png",
    userName: "Jane",
    userStars: "*****",
    userReviews: `Definitely coming back`,
  },
];

console.log(users[0]);

const name = document.querySelector(".name");
const avatar = document.querySelector(".avatar");
const stars = document.querySelector(".stars");
const reviews = document.querySelector(".review");
const left = document.querySelector(".left");
const right = document.querySelector(".right");

let i = 1;
// Check Users
function checkUsers() {
  if (i < users.length) {
    i++;
    console.log(i);
    changeUsers(users);
  } else if (i === users.length) {
    i = 0;
    console.log(i);
  }
}

function changeUsers(arr) {
  name.innerText = arr[i].userName;
  avatar.setAttribute("src", arr[i].userAvatar);
  stars.innerText = arr[i].userStars;
  reviews.innerText = arr[i].userReviews;
}

right.addEventListener("click", checkUsers);
body {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
    url("./cars.jpg") center;
  min-height: 100vh;
}

#reviews {
  display: flex;
  height: 100%;
  align-content: center;
  justify-content: center;
}

#title {
  color: white;
  font-size: 3.5rem;
  text-align: center;
  margin: 3rem 0;
  padding: 0px;
}

.testimonials {
  border: 2px solid white;
  color: white;
  text-align: center;
  width: 50%;
  align-self: center;
  min-height: 50vh;
  border-radius: 5px;
  letter-spacing: 5px;
  position: relative;
}

.testimonials .avatar {
  height: 8rem;
  border: white solid 5px;
  border-radius: 50%;
  padding: 2rem;
  z-index: 2;
  margin: 1rem 0;
}

.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial h2 {
  font-size: 3rem;
  margin: 0px;
  padding: 0px;
}

.testimonial h3 {
  font-size: 2.5rem;
  padding: 5px 0;
}

.testimonial p {
  font-size: 1.5rem;
  text-align: center;
  padding: 0 2rem;
  word-wrap: break-word;
  white-space: pre-wrap;
  width: 80%;
  margin: 1rem auto;
}

.left {
  position: absolute;
  left: -150px;
  top: 50%;
  transform: translateY(-50%);
}

.right {
  position: absolute;
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
  transform: rotate(180deg);
}

.left,
.right {
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 id="title">Customer Reviews</h1>
    <section id="reviews">
      <div class="testimonials">
        <img class="left" src="./arrow.png" alt="Left arrow" />
        <img class="right" src="./arrow.png" alt="right arrow" />
        <img class="avatar" src="./avatar1.png" alt="Avatar" />
        <div class="testimonial">
          <h2 class="name">Sandy</h2>
          <h3 class="stars">*****</h3>
          <p class="review">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
            dolor repudiandae iusto modi, consequatur temporibus a iste
            voluptatum soluta ipsum.
          </p>
        </div>
      </div>
    </section>
  </body>
</html>

标签： javascript

解决方案

您正在检查索引是否小于长度，然后添加一个

var users = [1,2,3];

let i = 2;
if (i < users.length) {
    i++;
    console.log(users[i]);
}

如您所见，您越过了最后一个索引。所以你想在检查之前增加。

var users = [1, 2, 3];

let i = 2;
i++;
if (i < users.length) {
  console.log(users[i]);
} else {
  console.log('here');
}

推荐阅读