React-select - 选项不关注所选值

Question

我在 3.1 版本中使用 react-select。 多亏了这个库，我已经完成了一个WeekSelector组件，它允许用户在特定的一周内使用 select。

这是我的代码：（已简化以说明重要部分）

class WeekSelector extends Component {

    onSelectChange = week => {
        const { name, onChange } = this.props;

        if (onChange && week) {
            onChange(name, Number.parseInt(week.value));
        }
        else if(!week){
            onChange(name, moment().week());
        }
    };

    render() {
        const { disabled = false, id, name, value, year } = this.props;

        //Number of weeks in a year 
        const weeks = this.getWeeksDetails(year);

        //Get value
        const formattedValue = weeks.find(week => {

            if(week.value === value){
                return {
                    value: week.value,
                    label: "Week" + week.value + week.details,
                };
            }
        });

        return (
            <Select
                isClearable
                id={id}
                name={name}
                isDisabled={disabled}
                options={weeks.map(week => {
                    return {
                        value: week.value,
                        label: "Week" + week.value + week.details,
                    };
                })}
                value={formattedValue}
                onChange={this.onSelectChange}
            />
        );
    }

问题如下，当我 select 选项中的一个值时，该值被正确选择。

选择周

但是当我重新打开选择器以查看所有选项时。 选择器不关注所选值。

打开选项并选择一个值

感谢 react-select 的文档和一些在线示例，我看到当我删除我的 onSelectChange function 或 setState 调用时，当我重新打开选项选择器时，该值被正确选择。

周选择得当

因此，我正在寻找一种方法来使用我的方法onSelectChange并将选择器选项校准为所选值。

感谢您对这个问题的关注。

再见。

Answer 1

将其添加到 select

defaultValue={formattedValue}