使用解析的字符串时，为什么会出现错误“无法读取null的属性'名称'”？

Question

Here I have a react container that holds an object in a variable called strLoc:

(what var strLoc looks like console logged)

Object {name: "Burj Khalifa", locationLat: "25.197787", locationLong: "55.274862"}

I want to use the name property of the object, but when I try to get {strLoc.name}, I get an error message:

Uncaught TypeError: Cannot read property 'name' of null

I don't understand why I can't just pull off the property values to use them? Does the problem have something to do with that the object was a string before (I parsed the string and saved the resulting object in var strLoc) ?

here is my code:

class NoteOutput extends React.Component {
    render() {
        var strLoc = JSON.parse(this.props.location); 
        return(
            <div>
                <div>hello</div>
                <div>{strLoc.name}</div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        location: state.selectedLocation
    };
}

Answer 1

its probably because you have the parse in your render() and it tries to show .name of a string/before it gets parsed.

try this:

{strLoc && <div>{strLoc.name}</div>}