Reactjs 当新道具传入时重置反应选择下拉列表

我想清除下拉列表中获取新道具的值。当前，前一个值仍然可见，即使我展开下拉列表，也可以看到新值

import React from 'react';
import Select from 'react-select';
import axios from 'axios';    

class KeydateDropdown extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            optionList: []
        };
    };

    componentDidUpdate(prevProps) {
        let vesselname = this.props.vesselname;
        if (prevProps.vesselname !== vesselname) {
            let keydateList = [];
            this.setState({
                optionList: keydateList
            });
            axios.get('list-keydates', {
                params: {
                    vesselname: vesselname
                }
            })
                .then((response) => {
                    let data = response.data['intervention'];
                    data.forEach((element) => {
                        keydateList.push({ value: element, label: element });
                    });
                    this.setState({ optionList: keydateList });
                })
        }
    }


    render() {

        return (
            <Select
                isDisabled={this.props.isDisabled}
                onChange={this.props.handleKeydateChange}
                options={this.state.optionList}
                className={styles.dropdown}
            />
        );
    }

}

export default KeydateDropdown;

从“React”导入React；
从“反应选择”导入选择；
从“axios”导入axios；
类KeydateDropdown扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选项列表：[]
};
};
componentDidUpdate（prevProps）{
让vesselname=this.props.vesselname；
如果（prevProps.vesselname！==vesselname）{
让keydateList=[]；
这是我的国家({
选项列表：keydateList
});
axios.get（'list-keydates'{
参数：{
vesselname：vesselname
}
})
。然后（（响应）=>{
让data=response.data['intervention']；
data.forEach（（元素）=>{
push（{value:element，label:element}）；
});
this.setState（{optionList:keydateList}）；
})
}
}
render（）{
返回(
);
}
}
导出默认keydate下拉列表；

我已经确认

组件中的第一个
setState（）
已更新

，它清除了

选项列表

调用

render（）

---

编辑：这是您忘记在

选择组件上显式设置值的原因。您必须将此.state.selectedKeydate传递到
MainInputBar
中的
KeyDate下拉列表
，然后将该值传递到
Select
组件：

在
mainputbar.jsx
中：

      keydateDropdown = (
        <KeydateDropdown
          vesselname={this.state.selectedVessel.value}
          selectedKeydate={this.state.selectedKeydate}
          handleKeydateChange={this.handleKeydateChange}
          value={this.state.selectedKeydate}
        />
      );

      <Select
        isDisabled={this.props.isDisabled}
        onChange={this.props.handleKeydateChange}
        options={this.state.optionList}
        className={styles.dropdown}
        value={this.props.value}
      />

我将您的沙盒分叉并在此处修复：
您能否提供一个codesandbox示例，使其更易于帮助您？此外，您似乎没有在
Select
组件中设置显式值。你试过了吗？嗨，我添加了代码沙盒。请看一看谢谢！确实如此-我没有理解你第一次说的话。如果你没有显式地将值传递给
Select
组件，它将使用内部状态跟踪它（隐式值）。这有点难以在评论中解释，因此codesandbox面临这个问题。很高兴能帮助你。