ES6 `array.find` 出错：ReactJS答案

【问题标题】：Getting error with ES6 `array.find`: ReactJSES6 `array.find` 出错：ReactJS
【发布时间】：2018-02-05 10:54:42
【问题描述】：

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

"无法读取未定义的属性'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”设置正确的上下文？

【问题讨论】：

您是否在渲染中记录了相册以确保已设置 this.state.album？
我想这会帮助你stackoverflow.com/questions/45468837/…或者这个stackoverflow.com/questions/47221853/…
渲染后返回前尝试 console.log(this.state) 并验证状态

标签： javascript reactjs

【解决方案1】：

如果您了解#array.find 的工作原理，如果所有元素都不符合条件，它将返回 undefined，否则返回单个元素。

根据MDN DOC：

find() 方法返回数组中第一个元素的值满足提供的测试功能。否则 undefined 是返回。

检查这个sn-p（发现会返回undefined）：

let a = [1,2,3,4,5].find(el => el>5);

console.log('a = ', a);   // will be undefined

这就是您在尝试访问 undefined 的属性时遇到错误的原因：

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

解决方案：

使用Short circuit evaluation概念并放入|| {}，如果find返回undefined，则将{}空白对象赋值给专辑值。

像这样：

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

并像这样使用它：

src={this.state.album.albumCover || ''}

或者使用album || {src: ''}:

this.state = {
    album: album || {src: ''}
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

我认为不会完全解决 OP 问题，它肯定会消除错误

【解决方案3】：

你的 props 区域作为参数传入这里，所以不要尝试通过this.props 访问，直接访问参数即可。

constructor(props) {
    super(props);

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

    this.state = {
        album: album
    };
}

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

【讨论】：