Question

无法在 React 中使用 state 读取 null 的属性

2017-04-09

1871

javascript reactjs ecmascript-6

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

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>
        )
    }
}

Answer 1

添加此行，它将起作用：

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

您需要在构造函数中定义 state 。

一些建议：

1. defaultProps 用于设置 props 的默认值，而不是 state 变量的默认值。这里不需要 defaultProps ，因为您正在使用 state 变量。查看示例。

2. 您将类名定义为 fileUpload （以小写字母开头），而不是使用 FileUpload （以大写字母开头）。

查看工作示例：

class FileUpload extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           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>
        )
    }
}

ReactDOM.render(<FileUpload/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>