Javascript 无法使用react中的状态读取null属性

我发现下面的代码有道理，它只是显示文件名时，用户上传了一个文件，但我得到了错误的无法读取属性的未定义的文件名？为什么？我不是已经将filename设置为null了吗

export default class fileUpload extends Component {
    constructor(props) {
        super(props);

        React.defaultProps = {
            filename: null
        }
    }

    handleOnChange = (e) => {
        this.setState({filename: e.target.files[0].name})
    }

    render() {
        return(
            <div>
                <input type="file" onChange={this.handleOnChange}/>
                {this.state.filename && <span className="filename-placeholder">{this.state.filename}</span>}
            </div>
        )
    }
}

导出默认类fileUpload扩展组件{
建造师（道具）{
超级（道具）；
React.defaultProps={
文件名：null
}
}
变化=（e）=>{
this.setState（{filename:e.target.files[0].name}）
}
render（）{
返回(
{this.state.filename&&{this.state.filename}
)
}
}

包括这一行，它将起作用：

constructor(props) {
    super(props);
    this.state = {};   //line
    React.defaultProps = {
        filename: null
    }
}

您需要在构造函数中定义

状态

几点建议：

1.

defaultProps

用于设置

props

的默认值，而不是

state

变量的默认值<这里不需要code>defaultProps，因为您使用的是

state

变量。检查示例

2.将类名定义为

fileUpload

（以小写字母开头），而不是使用

fileUpload

（以大写字母开头）

检查工作示例：

类文件上载扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文件名：null
}
}
变化=（e）=>{
this.setState（{filename:e.target.files[0].name}）
}
render（）{
返回(
{this.state.filename&&{this.state.filename}
)
}
}
ReactDOM.render（，document.getElementById（'app'））