检查数组时无法读取 null 的属性 'length'

Question

我正在尝试在网站上显示一些照片。每次尝试时，我都会收到此错误：

Cannot read property 'length' of null

import React, { Component } from 'react';
import axios from 'axios';


class ImagePlayer extends Component {
constructor(props) {
    super(props);
    this.state = {
        photos: null
    };
}

componentDidMount() {
    axios.get(`/api/gameDev/image-files/${this.props.charId}/pics`)
        .then((response) => {
            this.setState({ photos: response.data })
        })
        .catch((error) => {
            console.log(error);
        });

}

showMedia = (props) => {
    return (
        <div>
            {
                props.photos.length > 0 &&
                    <div>
                        {props.photos.map((photo) => photo.title)}
                    </div>
            }
        </div>
    );
}

render() {
    return (
        <div>
            <div>Show Media</div>
            <div>
                {this.showMedia(this.state)}
            </div>
        </div>
    );
}

}

导出默认 ImagePlayer；

我知道我做错了什么。如果有人看到什么，请告诉我。

谢谢！ :)

Answer 1

将初始 photos 状态设置为空数组：

this.state = {
    photos: []
};

或者，将 props.photos.length > 0 更改为：

props.photos && props.photos.length > 0 // or (props.photos || []).length > 0

Answer 2

第一次安装渲染时，状态中的照片为空。你需要将它设置为一个初始的空数组，这样这个阶段就不会失败：

this.state = {
  photos: []
};

检查数组时无法读取 null 的属性 'length'

Cannot read property 'length' of null when checking array

reactjs

react-component

检查数组时无法读取 null 的 属性 'length'

Cannot read property 'length' of null when checking array

reactjs

react-component

检查数组时无法读取 null 的属性 'length'