找不到变量：x - 通过ReactJS中的数组循环遍历

我试图迭代存储在商店中的数组。我得到这个红框错误：can't find variable: city. 这是一个正确的方式来循环reactJS中的数组？找不到变量：x - 通过ReactJS中的数组循环遍历

class CitiesPage extends Component { 

    render() {  
    return (
     <View> 
     <Text>Cities Info:</Text> 
     <div> 
      {this.props.citiesArr}.map(function(city) { 
      <li key={city}>{city}</li> 
      }); 
     </div> 
     </View> 
    ); 
    } 
}

我的店里面阵列看起来像这样：

const STORE_STATES = { 
    citiesArr: [ 
     {city:'Rome', population:'34454'}, 
     {city:'Paris', population:'45678'}, 
     {city:'London', population:'2334'}, 
     {city:'Milan', population:'23456'}, 
     {city:'Amsterdam', population:'1234'}, 
     {city:'Dublin', population: '234'}, 
     {city:'Valencia', population: '2345'}, 
     {city:'Ankara', population: '3456'} 
    ] 
};

来源

2017-01-02 splunk

我认为this.props.citiesArr.cities不存在。阵列是城市本身，我错了吗？哦，我看到你现在编辑它。 – avilac

{ 
    this.props.citiesArr.map(function(city) { 
    <li key={city}>{city}</li> 
    }) 
} 

// or ES6 arrow function 
{this.props.citiesArr.map((city) => <li key={city}>{city}</li>)}

而不是

在JSX（即代码看起来像HTML但实际上不是），JavaScript有是{ }之间，你放错地方的第二个。 Babel很可能会将您的JSX转换为完全不同的代码并导致错误。如果你不是100％确定的话，请检查转换后的源代码。

来源

2017-01-02 17:45:56 Solo

<div> 
{ 
    this.props.citiesArr.map((city) => 
     <li key={city}>{city}</li> 
    ); 
} 
</div>

JavaScript是使用内部JSX写{[JavaScript代码]}。

来源

2017-01-02 17:44:56 akshay

找不到变量：x - 通过ReactJS中的数组循环遍历

回答

相关问题