React: TypeError: items.map не является функцией - PullRequest
Новая
       9

React: TypeError: items.map не является функцией

0 голосов
/ 25 апреля 2020

Я получаю эту ошибку TypeError: items.map не является функцией при использовании функции get unique в реакции. Пожалуйста, кто-нибудь может мне помочь. Спасибо 

import React from 'react';
import Hero from "../components/Hero";
import Banner from "../components/Banner";
import {Link} from 'react-router-dom';
import RoomContainer from "../components/RoomContainer";

const getUnique = (items,value)=>{
    return [...new Set(items.map(item => item[value]))];
};

function RoomFilter(rooms) {
  const context = useContext(RoomContext);
  const { handleChange, type } = context;
  //get unique types

  let types = getUnique(rooms, 'type');
  //add all
  types = ['all', ...types];
  //map to jsx
  types = types.map((item, index) => {
    return (
      <option value={item} key={index}>
        {item}
      </option>
    );

  });

  return (
    <section className="filter-container">
      <Title title="search rooms" />
      <form className="filter-form">
        <div className="form-group">
          <label htmlFor="type">Room Type</label>
          <select name="type" id="type" value={type} className="form-control" onChange={handleChange}>{types}</select>
        </div>
      </form>
    </section>
  );
}

export default RoomFilter;

Ответы [ 3 ]

1 голос
/ 26 апреля 2020

Первый аргумент реагирующего функционального компонента - это props.

Однако ваш код описывает свойство реквизита. 

function RoomFilter(rooms) {

Это можно исправить с помощью деструктурирования либо в аргумент или позже как const. 

function RoomFilter({ rooms }) {

или 

function RoomFilter(props) {
  const { rooms } = props;
0 голосов
/ 26 апреля 2020

Item.map не является функцией, потому что вы пытаетесь заполнить новый Set () значениями, а set.add (value) принимает функцию, которая возвращает объект, который может вернуть значение быть добавлен с добавлением (значение).

0 голосов
/ 26 апреля 2020

Проблема в том, что вы передаете getUnique аргумент функции rooms, который не является массивом . Вы должны проверить, где вы передаете это свойство RoomFilter. В большинстве случаев это связано с тем, что начальное значение некоторых переменных состояния равно undefined вместо [] (как в этом случае). Но, если вам нужна дополнительная помощь, вы должны показать больше кода:)

...