React项目开发时localhost页面空白无报错问题求助

问题原因 #

白屏是ExpenseItem组件写法错误触发的运行时报错导致，和服务端口、样式代码无关。
你写的是React类组件，类组件的属性props默认挂载在组件实例this上，且render()函数被React调用时不会传入任何参数。你给render加了props形参，这个形参实际值为undefined，代码执行到props.date.toISOString()时，会触发「无法读取undefined的date属性」的类型错误，直接导致整个React应用挂载失败，页面渲染为空白。编译阶段不会抛出这类错误，所以终端不会显示报错提示。

修复方案 #

只需要修改ExpenseItem.js文件即可，App.js和CSS文件无逻辑问题：

1. 删除render方法的props形参
2. 将render内部所有props.xxx的引用替换为this.props.xxx

修正后的完整ExpenseItem.js代码如下：

import React, { Component } from 'react';
import './ExpenseItem.css'

class ExpenseItem extends Component {
    render() {
        return (
            <div className='expense-item'>
                <div>{this.props.date.toISOString()}</div>
                <div className='expense-item__description'>
                    <h2>{this.props.title}</h2>
                    <div className='expense-item__price'>${this.props.amount}</div>
                </div>
            </div>
        );
    }
}

export default ExpenseItem;

排查建议 #

后续遇到本地开发页面白屏的问题，优先打开浏览器开发者工具的Console面板，所有阻塞渲染的运行时错误都会在这里输出明确的报错信息和错误栈，不需要优先排查端口、服务启动类问题。

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