反应：数组作为道具显示为未定义

Question

我试图将一个名为 myitems 的数组作为 props 传递给子组件，但我收到一条错误消息，指出 options 在子组件中未定义。不确定这里发生了什么。任何帮助将不胜感激。

子组件：

import React from 'react';

const Dropdown = ({className, options}) => {

    return (
        <>
            <select className={className}>
                {options.map((el,i) => (<option key={i}>{el.type}</option>))}
            </select>
        </>
    )
}

export default Dropdown;

父组件：

import React from 'react';
import Dropdown from './Dropdown'

const BudgetInput = ({ descValue, budgetValue, onDescChange }) => {


    const myItems = [{ type: '+' }, { type: '-' }];

    return (
        <>
            <Dropdown 
                className="add__type"
                options={myItems}
            />
            <input 
                type="text" 
                className="add__description" 
                placeholder="Add description" 
                value={descValue}
                onChange={onDescChange} 
            />
            <input 
                type="number" 
                className="add__value" 
                placeholder="Value" 
                value={budgetValue}
                //onChange={}
            />
            <Dropdown
                className="add__category"
            />
            <button onClick={handleInput}>Enter</button>
        </>
    )
}

export default BudgetInput;

Answer 1

您没有将 options 道具传递给 second Dropdown 实例，这就是您收到错误的原因

<Dropdown
  className="add__category"
/>

反应：数组作为道具显示为未定义

React: array as props shows as undefined

javascript

components

undefined

reactjs

react-props