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

Question

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

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;

我已经确认清除optionList的componentDidUpdate内的第一个setState()调用render()

编辑：这是代码沙盒

Answer 1

您忘记了在Select组件上显式设置值。您必须在MainInputBar中将this.state.selectedKeydate传递给KeydateDropdown，然后将该值传递给Select组件：

在MainInputBar.jsx:中

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

在KeyStateDropdown.jsx:中

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

我把你的沙盒叉在这里修好了：https://codesandbox.io/s/happy-einstein-55klv