TypeError：无法读取未定义错误的属性“样式”答案

【问题标题】：TypeError: Cannot read property 'style' of undefined errorTypeError：无法读取未定义错误的属性“样式”
【发布时间】：2020-09-09 08:11:33
【问题描述】：

我正在为 React 中的快速排序算法可视化器制作动画。虽然我的代码不是最终的并且我仍在处理它，但我收到了“TypeError: Cannot read property 'style' of undefined”错误。我正在用这个项目学习 React，但不知道是什么导致了这个错误。错误来自这一行： 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);  
        }

我在同一个项目中没有收到合并排序的这个错误：

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);
            }
        }
    
    }

【问题讨论】：

标签： javascript arrays reactjs algorithm quicksort

【解决方案1】：

试试这个

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);  
            }        } 
        }

【讨论】：

谢谢！我不再收到那个错误了。您介意解释一下为什么之前是错误的吗？
称为条件（三元）运算符：developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/….
@SJama 在这里看到这两行 const barOneStyle = arrayBars[barOneIndex] ? arrayBars[barOneIndex].style : {}; const barTwoStyle = arrayBars[barTwoIndex] ? arrayBars[barTwoIndex].style : {} 这些被称为空安全属性访问
感谢@JubinSavla。我要调查他们。你真的把我从这么多的痛苦中救了出来！

【解决方案2】：

我怀疑其中之一或两者：

const barOneStyle = arrayBars[barOneIndex].style;
const barTwoStyle = arrayBars[barTwoIndex].style;

调用数组中不存在的索引。

或在其他地方

const barStyle = arrayBars[barIndex].style;

但这应该很明显

【讨论】：