React添加map遍历渲染组件代码后出现白屏如何修复？

问题根因 #

直接对undefined/null值调用.map()方法会触发JS运行时错误，React在渲染阶段捕获到未处理的异常时，会直接卸载整个React组件树导致页面白屏。
你当前的代码没有对this.props.tracks做类型校验和兜底，绝大多数场景下是组件首次渲染时，父组件还没传入合法的数组类型tracks属性（比如tracks是异步接口返回的数据，初始状态没设置默认值），首次渲染时this.props.tracks为undefined，调用.map()直接报错。

修复方案 #

• 给遍历逻辑加类型判断兜底，保证任何时候调用.map()的对象一定是数组，修改后的TrackList组件代码如下：

import React from 'react';
import Track from '../Track/Track';
import './TrackList.css'

class TrackList extends React.Component {
    render() {
        // 非数组场景兜底为空数组，避免调用map报错
        const trackList = Array.isArray(this.props.tracks) ? this.props.tracks : [];
        return (
            <div className="TrackList">
                {trackList.map(track => <Track track={track} key={track.id} />)}
            </div>
        )
    }
}

export default TrackList;

• 修正父组件的初始状态：如果tracks数据是异步拉取的，父组件声明tracks状态时必须设置初始值为空数组，不要留空让其默认为undefined：
  • 类组件状态声明示例：state = { tracks: [] }
  • 函数组件状态声明示例：const [tracks, setTracks] = useState([])
• 额外校验项：确认遍历的每一个track对象都存在唯一的id属性作为key值，key缺失/重复会引发渲染异常，除完全静态无增删排序的列表外，不要用数组下标作为key。

内容的提问来源于stack exchange，提问作者Andrew_Casal