Question

我有以下代码，它返回错误：

“无法读取未定义的属性'albumCover'

基于第24行的代码。

import React, {Component} from 'react';
import albumData from './../data/albums';

class Album extends Component {
    constructor(props) {
        super(props);

        const album = albumData.find( album => {
            return album.slug === this.props.match.params.slug
        });

        this.state = {
            album: album
        };
    }

    render() {
        return (
            <section className ="album">
                <section id="album-info">
                    <img id="album-cover-art" src={this.state.album.albumCover} /> <- error
                    <div className="album-details">
                        <h1 id="album-title"></h1>
                        <h2 className="artist"></h2>
                        <div id="release-info"></div>
                    </div>
                </section>
          </section>
        );
    }
}

export default Album

我的理解是，这是由于'this'的上下文没有正确设置的问题，但据我所知，这段代码应该正确执行。任何人都可以告诉我为什么我会收到错误，以及如何为'this'设置正确的上下文？

Answer 1

解决此问题的方法之一可能是

 <img id="album-cover-art" alt="some-default-image" src={this.state.album ? this.state.album.albumCover : ''} /> <- error

Answer 2

如果你看到#array.find如何工作，如果所有元素都不符合条件，它将返回undefined ，否则返回该单个元素。

根据MDN DOC：

find（）方法返回数组中第一个元素的值满足提供的测试功能。否则未定义返回。

检查此代码段（find将返回undefined）：

extension UITableView {
    func dequeueCell<T: UITableViewCell>(withIdentifier identifier: String) -> T? {
        return dequeueReusableCell(withIdentifier: identifier) as? T
    }
}

let cell: CustomCell = tableView.dequeueCell(withIdentifier: CustomCell.identifier)!

当您尝试访问undefined的属性时，这就是您收到错误的原因：

无法读取未定义的属性'albumCover'。

<强>解决方案：

使用Short circuit evaluation概念并添加let a = [1,2,3,4,5].find(el => el>5); console.log('a = ', a); // will be undefined，如果|| {}返回find，则会将undefined空白对象分配给相册值。

像这样：

{}

并像这样使用它：

this.state = {
     album: album || {},
};

或使用src={this.state.album.albumCover || ''}：

album || {src: ''}

Answer 3

您的道具区域作为参数传递到此处，因此您只需直接访问该参数，而不是尝试通过this.props进行访问。

constructor(props) {
    super(props);

    const album = albumData.find( album => {
        return album.slug === props.match.params.slug
    });

    this.state = {
        album: album
    };
}

此外，在尝试阅读之前，您还需要检查是否在状态中设置了album。

使用ES6`array.find`获取错误：ReactJS

3 个答案: