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>}
      ....

Answer 2

您无法在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>
    }));
}

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

无法在一个地方读取未定义的属性“状态”，在另一个地方可以读取

2 个答案: