React Select：第一次单击时不显示选项

Question

我通过react-select创建了一个子组件，但是第一次单击选择器时没有显示选项。 第二次单击每个部分时，将显示选项。 我尝试使用AsyncSelect但它再次不起作用。 数据是从本地存储中读取的，但我认为这没有问题。

沙盒： https://codesandbox.io/s/strange-field-4elv3?file=/src/App.js

我来自本地存储的数据：

const feauters = [
    {
        "id": 5,
        "title": "Type",
        "options": [
            {
                "id": 231040,
                "name": "cloth",
                "property": 5
            },
            {
                "id": 230081,
                "name": "Synthetic materials",
                "property": 5
            }
        ]
    },
    {
        "id": 646,
        "title": "Shoe soles",
        "options": [
            {
                "id": 231063,
                "name": "Abrasion resistant",
                "property": 646
            },
            {
                "id": 231064,
                "name": "Reduce the pressure",
                "property": 646
            }
        ]
    },
]

父组件：

<MultiSelect features={features} />

我的组件：

import React, {useEffect, useState} from 'react';
import {Form} from 'react-bootstrap';
import Select from 'react-select';

const MultiSelect = ({features}) => {

    // Declare States
    const [selectors, setSelectors] = useState([]);

    // Handle Features
    useEffect(() => {
        const initialSelectors = features.map((item, index, array) => {
            const options = item.options.map((subItem) => {
                return {
                    value: `${subItem.property}-${subItem.id}`,
                    label: subItem.name,
                };
            });

            return (
                <React.Fragment key={`product-multiselect-${index}-${item.id}`}>
                    <Form.Label htmlFor={`product-multiselect-${index}-${item.id}`}>{item.title}</Form.Label>
                    <Select
                        id={`product-multiselect-${index}-${item.id}`}
                        className="mb-2"
                        classNamePrefix="select"
                        defaultInputValue="Select..."
                        placeholder="Select..."
                        noOptionsMessage={() => 'Not Found.'}
                        isMulti
                        isClearable
                        isRtl
                        isSearchable
                        name={item.title}
                        onChange={handleChangeInput}
                        options={options}
                    />
                </React.Fragment>
            );
        });
        setSelectors(initialSelectors);
    }, [features]);

    // Handle Change Input
    const handleChangeInput = (values) => {
        console.log(values);
    };

    return selectors;
};

export default MultiSelect;

Answer 1

首先，如评论中所述，您不应将组件存储在 state 中。 相关问题

其次，由于defaultInputValue道具，选项不会显示。 如果您删除它，该组件将按预期工作