仅当我刷新页面时，React 文件才会抛出错误无法读取未定义的属性“style”
2021-04-06
1251
我有一个卡片轮播，我想通过更新卡片并选择“点”进行导航来“滑动”它。
从“点”（用于导航）中获取一个值
<div className = "dots" onClick = {() => currentSlide(1)}></div>
<div className = "dots" onClick = {() => currentSlide(2)}></div>
<div className = "dots" onClick = {() => currentSlide(3)}></div>
然后将代码发送到以下 javascript，该 javascript 获取索引并使用它来更新轮播并显示适当的幻灯片。
// Initially displaying first slide:
var slideIndex = 1;
showSlides(slideIndex);
// Getting current slide from navigation dot
function currentSlide(n) {
console.log("pressed on the dot: " + n)
showSlides(slideIndex = n)
}
const dotStyle = {
}
function showSlides(n) {
var i; // variable for indexing
var slides = document.getElementsByClassName("slide_container");
var dots = document.getElementsByClassName("dots");
// Clearing All Slides:
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none"
}
// Setting Current Dot to Active:
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// Displaying Other Slides:
slides[slideIndex - 1].style.display = "flex";
dots[slideIndex - 1].className += " active";
}当我第一次运行此代码时，它可以工作，但重新加载页面时，我收到错误 无法读取未定义的属性“样式”
这是我的项目代码的其余部分，供参考，以及一张图片来展示它应该是什么样的
import React, { useState, useEffect } from 'react';
import "./Message.css"
import quote from '../Home/icons/quote.svg'
import user from './imgs/user.svg'
const Message = () => {
// Initially displaying first slide:
var slideIndex = 1;
showSlides(slideIndex);
// Getting current slide from navigation dot
function currentSlide(n) {
console.log("pressed on the dot: " + n)
showSlides(slideIndex = n)
}
const dotStyle = {
}
function showSlides(n) {
var i; // variable for indexing
var slides = document.getElementsByClassName("slide_container");
var dots = document.getElementsByClassName("dots");
// Clearing All Slides:
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none"
}
// Setting Current Dot to Active:
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// Displaying Other Slides:
slides[slideIndex - 1].style.display = "flex";
dots[slideIndex - 1].className += " active";
}
// Main/Return Function
return (
<>
<div className = "carousel_container">
<div className = "slide_container">
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 1</h2>
<p className = "card_position">Position 1</p>
</div>
</div>
</div>
</div>
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 2</h2>
<p className = "card_position">Position 2</p>
</div>
</div>
</div>
</div>
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 3</h2>
<p className = "card_position">Position 3</p>
</div>
</div>
</div>
</div>
</div>
<div className = "slide_container">
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 4</h2>
<p className = "card_position">Position 4</p>
</div>
</div>
</div>
</div>
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 5</h2>
<p className = "card_position">Position 5</p>
</div>
</div>
</div>
</div>
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 6</h2>
<p className = "card_position">Position 6</p>
</div>
</div>
</div>
</div>
</div>
<div className = "slide_container">
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 7</h2>
<p className = "card_position">Position 7</p>
</div>
</div>
</div>
</div>
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 8</h2>
<p className = "card_position">Position 8</p>
</div>
</div>
</div>
</div>
<div className = "card_container">
<div className = "message_icon_background">
<img src = {quote} className = "message_icon" />
</div>
<div className = "card">
<p className = "card_text">
Far far away, behind the word <br />
mountains, far from the countries <br />
Vokalia and Consonantia, there live the <br />
blind texts.
</p>
<div className = "card_info">
<img src = {user} className = "card_photo" />
<div className = "card_id">
<h2 className = "card_name">Name 9</h2>
<p className = "card_position">Position 9</p>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Navigation Dots */}
<div className = "navigation_dots">
<div className = "dots" onClick = {() => currentSlide(1)}></div>
<div className = "dots" onClick = {() => currentSlide(2)}></div>
<div className = "dots" onClick = {() => currentSlide(3)}></div>
</div>
</>
)
}
export default Messagehtml {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
* {
all: none;
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
.carousel_container {
display: flex;
justify-content: center;
margin-top: -17vh;
-webkit-user-drag: none;
}
.slide_container {
display: grid;
gap: 7vw;
grid-auto-flow: column;
display: none; /* setting display intitally to nothing */
}
.card_container {
background-color: white;
border-radius: 3%;
background-color: #f8f9fd;
box-shadow: red;
}
.message_icon_background {
height: 40px;
width: 40px;
background-color: #55B441;
border-radius: 50%;
margin-top: -20px;
margin-left: 20px;
}
.message_icon {
height: 14px;
width: 14px;
margin: 30%;
filter: invert(100%);
}
.card {
border: none;
padding: 10px 20px 20px;
color: grey;
background-color: #f8f9fd;
}
.card_text{
font-size: 15px;
line-height: 1.8;
font-weight: 400;
}
.card_info {
display: flex;
gap: 20px;
}
.card_photo {
width: 80px;
height: 80px;
}
.navigation_dots {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 1rem;
}
.dots {
height: 20px;
width: 20px;
background-color: #55B441;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active, .dots:hover {
background-color: darkgreen;
}
/* Fading Animation */<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
3个回答
您的问题很容易解决。
由于您在实际创建组件之前调用 showSlides() 函数，它将尝试获取不存在的元素，因此出现“无法读取 undefined 的属性”错误。
要解决此问题，您只需添加一个 useEffect() 钩子，该钩子在组件安装后运行 showSlides() 函数。
如果您想要更深入的解释，我建议您观看 Fireship 关于 React 钩子的教程。以下是该链接： https://youtu.be/TNhaISOUy6Q
这是您的代码的修复版本！
// Initially displaying first slide:
var slideIndex = 1;
// Getting current slide from navigation dot
function currentSlide(n) {
console.log("pressed on the dot: " + n);
showSlides((slideIndex = n));
}
const dotStyle = {};
function showSlides(n) {
var i; // variable for indexing
var slides = document.getElementsByClassName("slide_container");
var dots = document.getElementsByClassName("dots");
// Clearing All Slides:
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
// Setting Current Dot to Active:
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// Displaying Other Slides:
slides[slideIndex - 1].style.display = "flex";
dots[slideIndex - 1].className += " active";
}
useEffect(() => {
showSlides(slideIndex);
},[]);
请告诉我这是否有效。
Nemesis
2021-04-06
将
?
添加到每个
slides[index]?.style
Ezequiel S. Sandoval
2021-04-06
使用 null 检查来避免此类情况
slides.length > 0 && slides[index].style
或
slides[index]?.style
akhtarvahid
2021-04-06