javascript - 无法在一处读取未定义的属性 'state'，而在另一处可以读取

Question

谁能帮我理解这句话的原因

if (this.state.ind == index) {return <div key={index}>

它显示错误，但是当我在 p 中打印 this.state.ind 时它可以正常工作吗？

var Countries = React.createClass({  
getInitialState: function() {
    return {
        countries: [],
        ind: 0,
        loaded: false,
    };
},

componentDidMount: function() {
    this.getCountry();
},

调用json文件

getCountry: function() {
    // take this to variable me -> used inside AJAX-callback functions
    var me = this;
    // create ajax call to json file, handle done and fail
    $.ajax({
        url: 'json/countries.json',
        cache: false,
        dataType: 'json'
    }).done(function(data) { 
        me.setState({countries: data.asia, loaded:true});   
    }).fail(function(jqXHR, textStatus, errorThrown) {
        me.setState({infoText: textStatus+":"+errorThrown});
    });
},

按钮代码

handleClick() {
this.setState({ind: this.state.ind + 1});
},


render: function() {    
    return (
        <div>
            {this.state.countries.map(function(country,index){

这里不起作用

               if (this.state.ind == index) {return <div key={index}>
                <p>{country.name}</p> 
                <p>{country.capital}</p>
               </div>;}
            })}

这里有效

            <p>{this.state.ind}</p>
            <button onClick={this.handleClick}>Next</button>
        </div>
    );
}

});

Answer 1

使用以下代码，因为我们无法在 jsx 中使用 if-else

render: function() {    
    return (
        <div>
           {this.state.ind == index && <div key={index}>
            <p>{country.name}</p> 
            <p>{country.capital}</p>
             </div>}
      ....