javascript - React : TypeError: items. map 不是函数

Question

我收到此错误 TypeError: items.map is not a function在 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;