[英]Making second setState in callback - bad practice?
我有一个组件,在其中我要制作第二个setState()作为第一个setState()的回调。 这是不好的做法吗? 还有另一种方法来同步调用两个setState吗?
最初,当我在第一个setState()中调用updateData()时,在myComponent组件中呈现正确的数据会有一个延迟。 这是落后的一个“步骤”。 这可行,但是这是常规的吗?
import React, { Component } from "react";
import MyComponent from "../../components/MyComponent";
import RaisedButton from "material-ui/RaisedButton";
import { generateData } from "./generateData";
class App extends Component {
constructor(props) {
super(props);
this.state = {
text: "",
data: []
};
}
updateData(){
this.setState({
data: generateData(this.state.text)
})
}
handleChange(e) {
this.setState({
text: e.target.value
}, () => {
this.updateData(this.state.text)
});
}
handleSubmit(e) {
e.preventDefault();
}
render() {
return (
<div>
<h2>Input</h2>
<form onSubmit={e => this.handleSubmit(e)}>
<textarea
value={this.state.text}
onChange={e => this.handleChange(e)}
/>
<div>
<RaisedButton type="submit"/>
</div>
</form>
<h2>Output</h2>
<MyComponent data={this.state.data} />
</div>
);
}
}
export default App;
问题似乎是您正在从this.state.text
更新data
。 相反,您可以通过引用原始输入值在单个调用中更新text
和data
:
handleChange(e) {
this.setState({
text: e.target.value,
data: generateData(e.target.value),
});
}
当然,这比对setState
进行两次调用(这意味着可能将组件重新呈现两次)更可取。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.