反应：类型错误：items.map 不是 function

Question

我收到此错误TypeError: items.map is not a function在反应中使用 get unique function。 请任何人都可以帮助我。 谢谢

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 。

但是，您的代码正在描述道具的属性。

function RoomFilter(rooms) {

您可以通过在参数中或稍后作为 const 进行解构来解决此问题。

function RoomFilter({ rooms }) {

或者

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

Answer 2

问题是你传入了getUnique function 参数rooms ，它不是一个数组。 您需要检查将此属性传递给RoomFilter的位置。 在大多数情况下，它与一些 state 变量的起始值未定义而不是[]相关（在这种情况下如何）。 但是，如果您需要更多帮助，您应该显示更多代码:)

Answer 3

Item.map is not a function because you are trying to fill a new Set() with values and a set.add(value) takes a function which returns a object that can return a value to be added with add(value).