我有一堆不同的 react 组件通过 api 获取数据,它们每个都有相应的 loadData 操作和 isLoading reducer。我正在尝试编写一个 HOC,它将显示加载微调器而不是组件,直到加载数据并且可以显示组件。
现在 isLoading 为真 -> 微调器呈现 -> isLoading 变为假 -> 子组件呈现 -> 子组件的 componentDidMount() 已执行 -> 这再次调用将 isLoading 设置为 false 的 loadData 操作,依此类推。如何防止这种情况并只调用 loadData 一次?或者也许有更优雅的解决方案?
class DataList extends Component {
componentDidMount() {
this.props.loadData(); //action that pulls data via api
}
render() {
return <p>{this.props.data}</p>;
}
}
const withSpinner = (comp) => (props) => {
if (props.isLoading) {
return <p>Loading...</p>
} else {
return <comp {...props} />
}
}
export default connect()(withSpinner(DataList));
// action that fetches data and updates state
const loadData = () => {
setIsLoading(true);
data = await fetchData();
setIsLoading(false);
}
最佳答案
好吧,解决此问题的最简单方法之一是将 dataLoaded
值添加到您维护状态的任何位置,并在您执行以下操作时将其设置为 true
已加载您的数据。然后,只需在调用 loadData
之前添加一个检查,这将阻止额外的加载请求。它看起来像这样:
class DataList extends Component {
componentDidMount() {
if (!this.props.dataLoaded) { // call it whatever you want
this.props.loadData(); //action that pulls data via api
}
}
render() {
return <p>{this.props.data}</p>;
}
}
const withSpinner = (comp) => (props) => {
if (props.isLoading) {
return <p>Loading...</p>
} else {
return <comp {...props} />
}
}
export default connect()(withSpinner(DataList));
// action that fetches data and updates state
const loadData = () => {
setIsLoading(true);
data = await fetchData();
setIsLoading(false);
setIsLoaded(true);
}
或者,您也可以将 dataLoaded
放在 loadData
函数中,前提是您可以访问其中的状态
关于javascript - 在 HOC 中包装数据获取组件以在加载时显示微调器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43807185/