Question

我的组件代码如下

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之前的数据。

Answer 1

rows是一个数组，因此!rows仍为true。试试这个：

return (
      <div>
        {rows && rows.length ? (
          //components HTML code here
       ) : (
          <img src="loading.gif" alt="Loading ..."/>
        )}
      </div>
)

Answer 2

尝试此componentWillUnmount() { this.props.countries = [] }，这可能会对您有所帮助。

Answer 3

您可以检查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的{{1}}，但如果大于0则将解析为false（类型转换或类型转换）。

true

在React.js中获取API提取的数据后加载组件

3 个答案: