未捕获的TypeError：无法读取未定义的属性“ImageRoute”

Question

我有一组简单的组件，它们都由以下主要组件组成。文档组件从其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")
    }
});