无法读取未定义的属性“原始”

时间:2019-04-10 18:14:42

标签: javascript

我不能将状态置为常数。我在一个按钮上单击的函数中管理状态,我只会将其递增1。这很好,但是当我尝试在应用程序中的其他位置使用该状态时,会出现此错误。

我尝试过先将状态放入变量,然后再将其放入常量。

          const Gallery = (
                <div className={classes.Gallery}>
                    <Image src={images[{...this.state.imageNumber}].original} />
                    <button onClick={this.nextImageHandler}>
                        Click Me!
                    </button>
                </div>
          );

1 个答案:

答案 0 :(得分:0)

问题是您尝试访问javascript变量的属性,而无需先检查它是否已定义。参见Detecting an undefined object property

您还没有正确索引数组,并且正在滥用散布运算符(...)。没有理由散布数字。 ...5没有真正的语义。

console.log({...5}); // yeilds {}

这意味着您正在尝试执行images[{}],并且意味着您正在尝试使用字符串[object Object]为数组建立索引。这可能不是您的本意。您应该只做images[this.state.imageNumber]

关于错误Cannot read property 'original' of undefined,我想可能是因为您从未初始化状态。结果,this.state.imageNumberundefined。这意味着您正在像images[undefined]这样索引数组。您应该做的是处理undefined情况,或者将状态初始化为一些合理的默认值。

类似的东西:

class MyComponent extends React.Component {
    state = { imageNumber: 0 };
    ...
    render() { ... }
}

无论如何,我建议您考虑学习javascript升级课程,因为您将javascript的基础知识与reactjs混淆了,这可能使您难以调试任何一个的问题。