Question

我在浏览器中收到此消息：TypeError：data.map不是函数

我正在从另一个组件传递数组作为道具。我做错了什么？预先谢谢你！

我想它可以与export default eventData连接，以便事件数据可以是对象，但在这种情况下不是数组

event-data.js

const months = ['January', 'February', 'March'];
const eventType = ['Party', 'Karaoke', 'Concert'];

const monthObject = [
  { id: 'sort-by-month' },
  { name: 'By month' },
  { values: months },
];

const eventObject = [
  { id: 'sort-by-category' },
  { name: 'By category' },
  { values: eventType },
];

const eventData = { monthObject, eventObject };


event-filter-bar.js

import eventData from '../../data/event-data';

class EventFilterBar extends React.Component {
  render() {
    return (
      <FilterToolbar data={eventData} />
    );
  }
}

event-filter-bar.js

import eventData from '../../data/event-data';

class EventFilterBar extends React.Component {
  render() {
    return (
      <FilterToolbar data={eventData} />
    );
  }
}

filter-toolbar.js

class FilterToolbar extends Component {
  render() {
    const { data } = this.props;
    return (
      <ButtonToolbar className="justify-content-center">
        <DropdownMaker data={data} />
        <DropdownWithDate />
        <ResetButton />
      </ButtonToolbar>
    );
  }
}

FilterToolbar.propTypes = {
  data: PropTypes.array.isRequired,
};

dropdown-maker.js

class DropdownMaker extends Component {
  render() {
    const { data } = this.props;
    const eventFilters = data.map((e) => (
      <DropdownMenu
        id={e.id}
        name={e.name}
        values={e.values}
        key={e.id}
      />
    ));
    return (
      { eventFilters }
    );
  }
}

DropdownMaker.propTypes = {
  data: PropTypes.array.isRequired,
};

Answer 1

monthObject和eventObject是相同的数据结构。因此，您可以通过将两者结合在一起来构成一个对象数组，并在event-data.js处导出该数组而不是两个数组的对象。因此，您的event-data.js应该看起来像-

const months = ['January', 'February', 'March'];
const eventType = ['Party', 'Karaoke', 'Concert'];

const eventData = [
    {
        id: 'sort-by-month',
        name: 'By month',
        values: months
    },
    {
        id: 'sort-by-category',
        name: 'By category',
        values: eventType 
    }
];

export default eventData;

现在您有了data数组，并且map应该可以正常工作了。

更新将DropdownMaker更新为

class DropdownMaker extends Component {
    render() {
        const { data } = this.props;
        return (
            data && data.length > 0 && data.map(e => {
                return (
                    <DropdownMenu
                        id={e.id}
                        name={e.name}
                        values={e.values}
                        key={e.id}
                    />
                )
            }
        );
    }
}

TypeError：data.map不是JavaScript中的函数

1 个答案: