我在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;
你的控制台在完成setSstate之前就被渲染了,请尝试下面的代码
this.setState({policy: e.target.value}, ()=>console.log(this.state.policy)}。
这里只有在完成setState后才会调用console.log()。