Javascript 无法读取属性'；州'；在一个地方和另一个地方，它可以读取未定义的

有谁能帮我弄明白这句话中的原因吗

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

调用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){

handleClick（）{
this.setState（{ind:this.state.ind+1}）；
},
render:function（）{
返回(
{this.state.countries.map（函数（国家，索引）{

这里不行

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

if（this.state.ind==index）{return
{country.name}

{国家首都}

;}
})}

这里有用

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

});

{this.state.ind}

下一个
);
}
});

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

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

render:function（）{
返回(
{this.state.ind==索引&&
{country.name}

{国家首都}

}
....

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

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

render:function（）{
返回(
{this.state.ind==索引&&
{country.name}

{国家首都}

}
....

您不能在JSX中使用if/then/else块。更好的形式是在map语句之前预先过滤列表，使其只显示您想要呈现的内容

render: function() {
    const testInd = this.state.ind;
    const indStates = this.state.countries.filter( function(c, ind) { return c.ind === testInd } );
    return (
       <div>
           { indStates.map( function( country ) {
               <div key={index}>
                   <p>{country.name}</p> 
                   <p>{country.capital}</p>
               </div>
           })}
       </div>
    }));
}

render:function（）{
const testInd=this.state.ind；
const indStates=this.state.countries.filter（函数（c，ind）{return c.ind==testInd}）；
返回(
{indStates.map（功能（国家）{
{country.name}

{国家首都}

})}
}));
}

---

在没有测试的情况下输入这个，但它似乎是您想要的。

您不能在JSX中使用if/then/else块。更好的形式是在map语句之前只对列表进行预筛选，以获得您想要呈现的内容

render: function() {
    const testInd = this.state.ind;
    const indStates = this.state.countries.filter( function(c, ind) { return c.ind === testInd } );
    return (
       <div>
           { indStates.map( function( country ) {
               <div key={index}>
                   <p>{country.name}</p> 
                   <p>{country.capital}</p>
               </div>
           })}
       </div>
    }));
}

render:function（）{
const testInd=this.state.ind；
const indStates=this.state.countries.filter（函数（c，ind）{return c.ind==testInd}）；
返回(
{indStates.map（功能（国家）{
{country.name}

{国家首都}

})}
}));
}

---

未经测试就输入了此内容，但它似乎是您想要的。

我很抱歉地询问，但现在它告诉我“无法读取未定义的属性‘map’”，我就是不知道有什么问题，因为react对我来说是新的。@Seiggailion我想这会解决它。我今天猜这可能会有帮助，但之后它会抱怨“Uncaught TypeError:无法读取在eval时未定义的属性‘state’”，在此行“const indStates=this.state.countries.filter（函数（c，ind）{return c.ind==this.state.ind}）；“。我就是搞不懂哪里出了问题，不管我读了多少书，然后试着=（那么试一下？我移动了“this.state.ind”的分辨率“对于局部变量声明，它的作用域应该很好。然后局部变量应该可以访问。我很不好意思再次打扰您，但现在它没有显示任何错误，尽管它没有打印信息。如果没有错误，我甚至不知道我可以用谷歌搜索什么。我很抱歉问一下，但现在它告诉了我。”“无法读取未定义的属性‘map’”，我就是不知道哪里出了问题，因为react对我来说是新的。@Seiggailion我想这会解决它。我今天猜这可能会有帮助，但之后它在这行“const indStates=this.state.countries.filter”中抱怨“Uncaught TypeError:无法读取未定义的属性‘state’”（函数（c，ind）{return c.ind==this.state.ind}）；”。不管我读了多少，我都不知道哪里出了问题，然后重试=（那么试试吧？我移动了“this.state.ind”的分辨率“对于局部变量声明，它的作用域应该很好。然后局部变量应该可以访问。我很不好意思再次打扰您，但现在它没有显示任何错误，尽管它没有打印信息。如果没有错误，我甚至不知道我可以用谷歌搜索什么。”。