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}) => {

反应钩子道具再次未定义

2 个答案: