反应下拉列表 - 所选值相差 1

Question

我在 React 中有一个下拉列表，其中填充了来自我的 API 的数据，工作正常。怎么样，当我在下拉列表中选择一个选项并记录结果时，它记录的结果始终显示我所选项目上方 1 位的项目。 在我第一次选择时，它也显示为空白，但之后每个选择都显示为空白，偏差一个。 有人看到我错过了什么吗？

import React, { Component } from 'react';
import { Editor } from '@tinymce/tinymce-react';

class TinyEditor extends Component {
constructor(props) {
super(props);
this.state = { 
content: '',
policy: '',
policies: []
};
this.selectPolicy = this.selectPolicy.bind(this);
}
componentDidMount() {
console.log(`Component did mount`);
fetch(`/api/policy/all`)
.then(res => res.json())
.then((result) => {
console.log(result);
this.setState({policies: result});
});
}

selectPolicy(e) {
this.setState({policy: e.target.value});
console.log(this.state.policy);
}
render() {
return (
<div>
<div className="container">
<select onChange={this.selectPolicy}
value={this.state.policy}>
<option default>Select Policy...</option>
{ this.state.policies.map(item => (
<option key={item.policy}>{item.policy}</option>
))}
</select>
</div>
</div>
)
}
}
export default TinyEditor;

Answer 1

您的控制台在完成 setSstate 之前被渲染， 尝试以下代码

this.setState({policy： e.target.value}， ((=>console.log(this.state.policy(}

这里 console.log(( 只有在完成 setState 后才会被调用。