Question

我正在尝试遍历存储在商店中的数组。我收到此红框错误：can't find variable: city. 这是在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'}
    ]
};

Answer 1

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

使用{[your javascript code]}在jsx中编写Javascript。

Answer 2

{
  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>)}

而不是

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

在JSX中（代码看起来像HTML但实际上并非如此），JavaScript必须介于{ }之间，而你错放了第二个。 Babel最有可能将您的JSX转换为执行完全不同的代码并导致错误的代码。如果您不是100％确定，请检查已编译的源代码。

无法找到变量：x - 在ReactJS中循环遍历数组

2 个答案: