React : TypeError: items.map不是一个函数。

Question

我得到了这个错误 类型错误： items.map不是函数。 在react中使用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;

Answer 1

react功能组件的第一个参数是它的 props.

然而你的代码描述的是props的一个属性。

function RoomFilter(rooms) {

你可以通过在参数中或之后作为一个const进行解构来解决这个问题。

function RoomFilter({ rooms }) {

或

function RoomFilter(props) {
  const { rooms } = props;

Answer 2

问题是，你通过在 getUnique 功能参数 rooms，其中 不是一个数组. 你要检查一下你把这个财产传到哪里去了 RoomFilter. 在大多数情况下，它与一些状态变量的起始值有关。未定义 而不是 [] 在这种情况下如何）。但是，如果你需要更多的帮助，你应该展示更多的代码:)

Answer 3

Item.map不是一个函数，因为你是在尝试填写 一个新的集() 与值，而set.add(value)需要一个函数，该函数返回一个对象，该对象可以返回一个与add(value)相加的值。