无法使用 this.setState() 中的扩展运算符更新 json 属性 - React.js

Question

以下是包含两个下拉列表的简单反应代码，分别用于选择report type和date type。在选择每个下拉列表时，我尝试使用展开运算符更新state中相应的单个属性(metricsDropDown : reporType，dateDropDown:dateType(。但是，reportType正在更新为state中的undefined。

代码给出如下：

class MetricsReport extends Component {
constructor(props) {
super(props)
this.state = {
metricsParams: {reportType: "", dateType: ""}
}
this.getReportType = this.getReportType.bind(this);
this.getMetricsDateType = this.getMetricsDateType.bind(this);
}
getReportType(event) {
console.log(this.state.metricsParams);
const {value} = event.target.value;
this.setState(prevState => ({
metricsParams: {
...prevState.metricsParams,
reportType: value
}
}))
}
getMetricsDateType(event) {
console.log('metricsparams:reportType', this.state.metricsParams.reportType); // reportType is undefined here
const {value} = event.target.value;
this.setState(prevState => ({
metricsParams: {
...prevState.metricsParams,
dateType: value
}
}))
}
componentDidMount() {
}
render() {
return (
<div >
<select id="metricsDropDown" className="browser-default" onChange={this.getReportType}>
<option value="MetricsByContent">Metrics By Content</option>
<option value="MetricsByUser">Metrics By User</option>
</select>
<select id="dateDropDown" className="browser-default" onChange={this.getMetricsDateType}>
<option value="Publish Date">Publish Date</option>
<option value="Expiry Date">Expiry Date</option>
<option value="Read Date">Read Date</option>
</select>
</div>
)
}
}
export default MetricsReport;

Answer 1

解构语法是错误的。它期望value属性是具有另一个value属性的对象。

它应该是：

const {value} = event.target;