找不到變量：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中的數組循環遍歷

回答

相關問題