Uncaught TypeError: Cannot read property 'ImageRoute' of undefined

Question

我有一组简单的组件，所有组件都由以下主要组件组成。文档组件从其属性属性中公开其事件处理程序。该事件按预期一直触发。但是，一旦它陷入主要组件，我就会尝试设置状态。在事件处理程序中设置状态后，它会在我第一次尝试检索状态时抛出错误。随后的每次尝试都按预期工作。

在下面的示例图像中，它显示了我第一次设置并尝试从失败的文档对象中打印出 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")
    }
});

Uncaught TypeError: Cannot read property 'ImageRoute' of undefined

Uncaught TypeError: Cannot read property 'ImageRoute' of undefined

reactjs

react-jsx