[英]TypeError: Cannot read property 'style' of undefined error
I am working on animating a quicksort algorithm visualiser in React.我正在为 React 中的快速排序算法可视化器制作动画。 While my code is not final and I am still working on it, I am getting a 'TypeError: Cannot read property 'style' of undefined' error.
虽然我的代码不是最终的并且我仍在处理它,但我收到了“TypeError:无法读取未定义的属性“样式”错误。 I am learning React with this project but can't figure out what is causing this error.
我正在通过这个项目学习 React,但无法弄清楚是什么导致了这个错误。 The error comes from this line: const barOneStyle = arrayBars[barOneIndex].style;
错误来自这一行: const barOneStyle = arrayBars[barOneIndex].style;
quickSort() {
const animations = getQuickSortAnimations(this.state.array);
for (let i = 0; i < animations.length; i++) {
const isColorChange = animations[i][0] === "comparision1" || animations[i][0] === "comparision2";
const arrayBars = document.getElementsByClassName('array-bar');
if(isColorChange === true) {
const [comparision, barOneIndex, barTwoIndex] = animations[i];
const color = (animations[i][0] === "comparision1") ? 'navy' : 'pink';
const barOneStyle = arrayBars[barOneIndex].style;
const barTwoStyle = arrayBars[barTwoIndex].style;
setTimeout(() => {
barOneStyle.backgroundColor = color;
barTwoStyle.backgroundColor = color;
},i * ANIMATION_SPEED_MS);
}
else {
const [barIndex, newHeight] = animations[i];
if (barIndex === -1) {
continue;
}
const barStyle = arrayBars[barIndex].style;
setTimeout(() => {
barStyle.height = `${newHeight}px`;
},i * ANIMATION_SPEED_MS);
} }
//this.setState({array: sortArray})
//const RESTORE_TIME = parseInt(ANIMATION_SPEED_MS*animations.length/2 + 3000);
//setTimeout(() => this.restoreStoreButtons(), RESTORE_TIME);
}
I did not get this error for the mergesort in the same project:我在同一个项目中的合并排序没有收到此错误:
mergeSort() {
const animations = getMergeSortAnimations(this.state.array);
for (let i= 0; i < animations.length; i++) {
const arrayBars = document.getElementsByClassName('array-bar');
const isColorChange = i % 3 !== 2;
if (isColorChange) {
const [barOneIdx, barTwoIdx] = animations[i];
const barOneStyle = arrayBars[barOneIdx].style;
const barTwoStyle = arrayBars[barTwoIdx].style;
const color = i% 3 === 0 ? 'navy' : 'pink';
setTimeout(() => {
barOneStyle.backgroundColor = color;
barTwoStyle.backgroundColor = color;
}, i * ANIMATION_SPEED_MS);
} else {
setTimeout(() => {
const [barOneIdx, newHeight] = animations[i];
const barOneStyle = arrayBars[barOneIdx].style;
barOneStyle.height = `${newHeight}px`;
}, i * ANIMATION_SPEED_MS);
}
}
}
I suspect that one of it or both:我怀疑其中之一或两者:
const barOneStyle = arrayBars[barOneIndex].style;
const barTwoStyle = arrayBars[barTwoIndex].style;
call index that doesnt exist in array.调用数组中不存在的索引。
or here in else或者在这里
const barStyle = arrayBars[barIndex].style;
but that should be obvious但这应该是显而易见的
Try this尝试这个
quickSort() {
const animations = getQuickSortAnimations(this.state.array);
for (let i = 0; i < animations.length; i++) {
const isColorChange = animations[i][0] === "comparision1" || animations[i][0] === "comparision2";
const arrayBars = document.getElementsByClassName('array-bar');
if(isColorChange === true) {
const [comparision, barOneIndex, barTwoIndex] = animations[i];
const color = (animations[i][0] === "comparision1") ? 'navy' : 'pink';
const barOneStyle = arrayBars[barOneIndex]?arrayBars[barOneIndex].style: {};
const barTwoStyle = arrayBars[barTwoIndex]?arrayBars[barTwoIndex].style:{};
setTimeout(() => {
barOneStyle.backgroundColor = color;
barTwoStyle.backgroundColor = color;
},i * ANIMATION_SPEED_MS);
}
else {
const [barIndex, newHeight] = animations[i];
if (barIndex === -1) {
continue;
}
const barStyle = arrayBars[barIndex]?arrayBars[barIndex].style:{};
setTimeout(() => {
barStyle.height = `${newHeight}px`;
},i * ANIMATION_SPEED_MS);
} }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.