Reactjs 组件未从常量读取对象值

我试图将值从常量选项传递到组件。我做的一切都对吗？当我试图阅读子组件中的道具时，我只得到get value=“undefined”。我只是尝试将options.value传递给FetchRandomBet，以便在子组件中使用options.value

import React, { Component } from 'react';
import Select from 'react-select';
import Button from '@material-ui/core/Button';
import FetchRandomBet from "./fetchRandomBets";

const options = [
    { value: '1', label: 'less than 2' },
    { value: '2', label: 'more than 2' },
];

class Betslip extends Component {

    state = {
        names: [],
        odds: []
    };

    render() {
        return (
            <div className="betslip">

                <div className="betslip-top">
                    <h1 className="text">BETSLIP</h1>
                    <p className="text-two">BET WITH US!</p>
                    <Select className="filter-menu" options={options} />
                </div>

                <div>
                    <FetchRandomBet
                        key={options.value}
                        value={options.value} />
                </div>
                console.log(options.value)
                <Button className="betnow" variant="contained">
                    Bet Now!
                </Button>
            </div>
        );
    }
}

export default Betslip;

import React，{Component}来自'React'；
从“反应选择”导入选择；
从“@material ui/core/Button”导入按钮；
从“/fetchRandomBets”导入FetchRandomBet；
常量选项=[
{值：“1”，标签：“小于2”}，
{值：'2'，标签：'2'以上}，
];
类扩展组件{
状态={
姓名：[]，
赔率：[]
};
render（）{
返回(
贝特利普
与我们打赌
console.log（options.value）
现在打赌！
);
}
}
出口违约金；

首先，您不应该在return语句内部使用console.log，但在外部可以。 下一步，尝试使用这个

const value = options.map((op) => op.value)
const label = options.map((op) => op.label)

 <FetchRandomBet
             key={value}
             value={label} />

const value=options.map（（op）=>op.value）
const label=options.map（（op）=>op.label）

您正在访问一个数组，就像它是一个对象一样，因此首先应该输入对象，然后选择键或值

通过这种方式，您将传递给子组件2数组： 值=[1,2] 标签=[“小于2”，“大于2”]

---

让我知道你要找的是不是一个对象数组，所以你不能使用选项值。必须转到数组元素，然后对其执行.value操作，即

选项[0]。value

，

选项[1]。value

这还取决于组件接受道具的方式。如果

FetchRandomBet

的

value

道具被设计为接受数组，则只需传递整个

选项即可，如下代码所示：

<div>
    <FetchRandomBet key={1} value={options} />
</div>



注意：这是假设FetchRandomBet组件接受值作为数组


或者，如果您想为每个选项值调用FetchRandomBet（根据您在问题中提供的上下文，这是极不可能的），您可以执行以下操作：

<div>
    {
        options.map(option => <FetchRandomBet key={option.value} value={option.value} />)
    }
</div>


{
options.map（option=>）
}

上面的代码将为每个选项值创建FetchRandomBet实例。
神奇的是，现在我能够读取对象选项中的所有数据。谢谢您对代码做了哪些更改？以上哪一项？