react钩子道具再次未定义

Question

我正在尝试从我的App.js发送一个硬编码的数组到一个叫做'Select‘的组件。它看起来和我正在学习的教程一模一样。也许其他人可以看到我做错了什么。

状态变量'categories‘在App.js中定义，在select.js中未定义

import {useState} from "react";
import Header from "./components/header";
import Select from "./components/select.js";


function App(){
    const [categories, setCategories] = useState([
            {
                id: 1,
                name:'Restaurant',
                pros:['Great Menu, good food, Great Beer list, live music'],
                cons:['Bad acoustics, bad service, rude staff, over priced']
            },
            {
                id: 2,
                name:'Music Venue',
                pros:['Good seating, Music Variety, Good Dance Floor, Good Bar, Good Food'],
                cons:['Bad acoustics, bad crowd, small space, over priced']
            },
            {
                id: 3,
                name:'Hiking Trail',
                pros:['Spectacular Scenery, Great Destination, Swimming, Drinking Water'],
                cons:['Crowded, Horses/Bicycles, Burn Zone, Biting Bugs']
            }
        ]);    
    
    return(
        <div className="container">
            
            <Header />
             
            {categories.length > 0 ?
              <Select options={categories}
              />:' No Options'}
            
        </div>
    )
}
export default App;

import Option from "./option.js"

const Select = ({categories}) => {
    
   
  {console.log(categories)}
    return (
        <>
        
            <select name="selectCat" id="selectCat">

            <option value="" defaultValue>Choose a Category</option>
            
            {categories && categories.map((option) => (
            
            <Option key={option.id} text={option.name}/>))}
            </select>
            </>
        
    )
}

export default Select

提前感谢

Answer 1

您正在传递错误的属性名称。将options更改为categories

<Select 
   categories={categories} <- here
 />:' No Options'}

Answer 2

import Option from "./option.js"

const Select = ({categories}) => {
    
   
  {console.log(categories)}
    return (
        <>
        
            <select name="selectCat" id="selectCat">

            <option value="" defaultValue>Choose a Category</option>
            
            {categories && categories.map((option) => (
            
            <Option key={option.id} text={option.name}/>))}
            </select>
            </>
        
    )
}

export default Select

您传递的是选项，但却在破坏类别。因此，请尝试解构选项。

const Select = ({options}) => {