Question

我试图将名为myitems的数组作为prop传递给子组件，但是我收到一条错误消息，指出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"
/>

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

1 个答案: