我正在尝试使用 React MultiSelect 下拉组件来实现一个下拉框，其中包含将从 API 中检索的选项列表。

我已经复制了启动的代码，安装了 npm 包并将其添加到一个函数中，但我一直收到错误。这是我的代码：

import React, { useState } from 'react';
import Multiselect from 'multiselect-react-dropdown';


function Checkbox() {

    this.state = {
        options: [{ name: 'Option 1️', id: 1 }, { name: 'Option 2️', id: 2 }]
    };
    
    return (
        <Multiselect
            options={this.state.options} // Options to display in the dropdown
            selectedValues={this.state.selectedValue} // Preselected value to persist in dropdown
            displayValue="name" // Property name to display in the dropdown options
        />
    );
}

export default Checkbox;

以及我尝试使用它的地方：

import React, { useState } from 'react';
import { Container, Row, Col, Form } from 'react-bootstrap';
import DateRange from '../DateRange';
import SiteComponentLoader from '../SiteComponentLoader';
import Checkbox from '../Checkbox';

function LotList({ status }) {

    status ??= "";

    const defaultDateRange = {
        from: null, //new Date().toISOString().split('T')[0],
        to: null
    };

    const [dateFilter, setDateFilter] = useState(defaultDateRange);
    const [includeGraded, setIncludeGraded] = useState(false);
    const [selectedOptions, setSelectedOptions] = useState();

    const handleSelectedOptions = (selectedList) => {
        setSelectedOptions(selectedList);
    }

    const handleIncludeGraded = (e) => {
        setIncludeGraded(e.target.checked);
    }

    return (
        <Container fluid>
            <Row className="d-flex align-items-center mb-3">
                <Col className="d-flex justify-content-start">
                    <DateRange dateFilter={dateFilter} setDateFilter={setDateFilter} />
                </Col>
                <Row className="d-flex align-items-center mb-3">
                    <Col className="d-flex justify-content-start">
                        <Checkbox selectedOptions={selectedOptions} setSelectedOptions={handleSelectedOptions} />
                    </Col>
                </Row>
                <Col className="d-flex justify-content-end pt-2">
                    <Form.Check type="checkbox" onChange={handleIncludeGraded} className="me-2" style={{ marginTop: "-0.5rem" }} />
                        <Form.Label>Include graded items?</Form.Label>
                </Col>
            </Row>
            <Row>
                {/* TODO: Get the site code from configuration in some way */}
                <SiteComponentLoader component="./Pages/LotListTable" site="SCP" tableFilters={{ status: status, dateFilter: dateFilter, includeGraded: includeGraded }} />
            </Row>
        </Container>
    );
}

export default LotList;

但是，当我运行此代码时，我收到以下错误：

Uncaught TypeError：无法在 Checkbox (Checkbox.js:7:1) 处设置未定义的属性（设置“状态”）

我不确定为什么会发生这种情况，因为我使用以下行设置状态：

    this.state = {
        options: [{ name: 'Option 1️', id: 1 }, { name: 'Option 2️', id: 2 }]
    };

虽然这最终会改变，以便我从 API 中获取这些选项而不是对它们进行硬编码，但我现在只是想让包正常工作。有人可以建议我应该怎么做才能解决这个问题吗？