我有一个名为Searcher的组件,其中有一个函数SearchArticle(),在组件挂载后会正确地使用this.state.search的默认值(控制台显示Searching...:DEFAULT)。但是当我通过handleKeyPress(e)更新this.state.search时,同样的函数SearchArticle()将使用更新前的prevState而不是更新后的e.target值(控制台再次显示Searching...:DEFAULT)。不确定如何解决这个问题。
class Searcher extends Component {
constructor(props) {
super(props);
this.state = {
article: [], search: "DEFAULT"
};
}
searchArticle() {
console.log('Searching...: ', this.state.search)
}
handleKeyPress = (e) => {
if (e.key === 'Enter') {
this.setState({search: e.target.value});
this.searchArticle();
}
}
componentDidMount() {
this.searchArticle();
}
render() {
return (
<div className="row">
Search: <input onKeyPress={this.handleKeyPress} type="text" />
</div>
)
}
}