Question

未捕获的类型错误：无法读取未定义的属性“ImageRoute”

2015-11-12

392

reactjs

我有一组简单的组件，它们全部由以下主要组件组成。文档组件从其 props 属性公开其事件处理程序。事件按预期一路触发。但是，一旦它被捕获到主组件中，我就会尝试设置状态。在事件处理程序中设置状态后，第一次尝试检索状态时它会抛出错误。每次后续尝试均按预期工作。

在下面的示例图中，它显示了我第一次设置并尝试从文档对象打印出 ImageRoute 的值时失败，但之后每次都成功。

selectedDocument 是事件处理程序

有人可以解释一下吗？

var Workstation = React.createClass({
getInitialState: function () {
    return {};

},
selectedDocument :function(obj, clickedNumber){
    var component = this;
    console.log(obj.ImageRoute)
    console.log(clickedNumber + " was clicked")
    component.setState({ selectedDocument: obj });

    console.log("selectedDocument set")

    if (this.isMounted()) {
        console.log(this.state.selectedDocument.ImageRoute)
    } else {

        console.log("not mounted")
    }
},

render: function () {

    return (

        <div>
            <DocumentQueue initialData={jsonData.initialData} selectedDocument={this.selectedDocument} />
            <ImageViewer src={this.state.selectedDocument==null ? this.state.selectedDocument : this.state.selectedDocument.ImageRoute} />
        </div>
        );
}

});

Answer 1

您尚未设置状态。我的意思是 setState 函数是异步的，不会等到状态设置完毕后才转到下一行代码。您可以使用回调函数来正确设置它

var component = this;
console.log(obj.ImageRoute)
console.log(clickedNumber + " was clicked")
component.setState({ selectedDocument: obj }, function(){
    console.log("selectedDocument set")

    if (component.isMounted()) {
        console.log(component.state.selectedDocument.ImageRoute)
    } else {
        console.log("not mounted")
    }
});