我的组件代码如下
componentDidMount = () => {
this.props.dispatch(getCountry());
}
render() {
let rows = this.props.countries.map((item, index) => (//some code here));
return (
<div>
{rows ? (
//components HTML code here
) : (
<img src="loading.gif" alt="Loading ..."/>
)}
</div>
)
}
但是该组件在获取API数据之前正在加载。
您可以检查rows
数据,因为如果不获取,它将是一个空数组。
return (
<div>
{rows && rows.length ? (
//components HTML code here
) : (
<img src="loading.gif" alt="Loading ..."/>
)}
</div>
)
您也可以像rows && rows.length > 0
一样写您的条件,与rows && rows.length
相同。 rows.length
如果为空,则将解析为0
,即false
,但如果大于0,则为true
(类型转换或类型转换)。
return (
<div>
{(rows && rows.length > 0 ? (
//components HTML code here
) : (
<img src="loading.gif" alt="Loading ..."/>
)}
</div>
)
rows
是一个数组,因此!rows
仍然为真。试试这个:
return (
<div>
{rows && rows.length ? (
//components HTML code here
) : (
<img src="loading.gif" alt="Loading ..."/>
)}
</div>
)
尝试此componentWillUnmount() {
this.props.countries = []
}
,可能会有所帮助。