Question

大家好，我只是从reactjs开始，然后跟随一个教程，老师想传递一个城市数组，然后使用map（）函数将字符串转换为组件，我按照他的步骤进行，但我不知道为什么反应返回我的城市。地图不是函数。

import React, { Component } from 'react';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import LocationList from './components/LocationList';

const cities = [
  'Granada,es',
  'Moscu,ru',
  'Washington dc,us',
  'Barcelona,es',
  'Madrid,es',
 ];

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <LocationList>cities={cities}</LocationList>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

在这里，我用一些城市创建数组，并使用此数组调用LocationList。

import React from 'react';
import WeatherLocation from './WeatherLocation';
import PropTypes from 'prop-types';

const strToComponent = cities => (
    cities.map(city => (<WeatherLocation city = {city} />))
);
const LocationList = ({cities}) => (
    <div>
        {strToComponent({cities})}
    </div>
);

LocationList.propTypes = {
    cities: PropTypes.array.isRequired,
}
export default LocationList;

在哪里对我说错误是strToComponent函数告诉我city.map不是函数。你们知道为什么会这样吗？多谢您的帮助

非常感谢你们。

Answer 1

您必须将cities作为对LocationList的支持，而不是children。

<LocationList cities={cities} />

strToComponent({cities})等效于strToComponent({cities : cities})，这不是您想要的。只需传入cities数组作为参数即可。

const LocationList = ({cities}) => (
    <div>
        {strToComponent(cities)}
    </div>
);

Answer 2

您这里有两个问题。

您没有在此处传递cities的{{1}}组件，而是作为一个孩子传递了它。因此更改此：

LocationList

第二个问题是您将<LocationList cities={cities} />传递给cities组件是错误的：

strToComponent

在这里，您将其作为对象传递，但实际上不是。像这样更改：

const LocationList = ({cities}) => (
    <div>
        {strToComponent({cities})}
    </div>
);

AnyArray.map（）不是函数

2 个答案: