React组件无法读取const定义的对象值，传至子组件后props为undefined

你当前写法的核心错误 #

• 你定义的options是数组类型，数组本身不存在value属性，直接读取options.value天然会返回undefined，你写的value={options.value}本质上在访问不存在的属性，这也是子组件拿到undefined的直接原因。
• 你写的key={options.value}没有实际作用：key属性通常用于列表渲染的DOM复用优化，这里给单个组件传undefined的key还会触发React的渲染警告。
• 你的业务需求是把用户在下拉选择框中选中的选项value传给子组件，但当前代码里<Select>是无受控模式，没有同步存储用户的选择结果，就算修正了取数组属性的问题，传递的值也不是用户实际选中的内容。
• 你写的console.log(options.value)直接放在了JSX代码块内部，代码位置错误，不会正常按预期执行。

正确实现步骤 #

1. 在Betslip组件的state中新增字段，用于存储下拉选择框的选中结果
2. 将<Select>改造为受控组件，绑定onChange事件把用户选择同步到state中
3. 从state中读取选中的value值，作为props传递给FetchRandomBet组件

改造后的完整参考代码 #

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: [],
        // 新增状态存储下拉选中值
        selectedOption: null
    };

    // 下拉选择的回调处理
    handleSelectChange = (selected) => {
        this.setState({ selectedOption: selected });
    }

    render() {
        // 提取选中项的value，未选中时返回空值做兜底
        const selectedBetValue = this.state.selectedOption?.value;
        // 调试日志移动到JSX外部，正常执行
        console.log('当前选中的bet值：', selectedBetValue);

        return (
            <div className="betslip">

                <div className="betslip-top">
                    <h1 className="text">BETSLIP</h1>
                    <p className="text-two">BET WITH US!</p>
                    {/* 受控Select，绑定选中值和变更事件 */}
                    <Select 
                        className="filter-menu" 
                        options={options} 
                        value={this.state.selectedOption}
                        onChange={this.handleSelectChange}
                    />
                </div>

                <div>
                    {/* 把state中存储的选中值传给子组件 */}
                    <FetchRandomBet
                        value={selectedBetValue} 
                    />
                </div>

                <Button className="betnow" variant="contained">
                    Bet Now!
                </Button>
            </div>
        );
    }
}

export default Betslip;

补充说明：如果你的需求是把options中所有选项的value集合传给子组件，而非用户选中的单个值，可以直接把取值改成value={options.map(item => item.value)}，但从下拉交互的业务逻辑看，这种需求和你当前的场景不匹配。

内容的提问来源于stack exchange，提问作者Valentino De Vivo