Question

我正在尝试在加载数据时显示加载器图标。但是由于某种原因，当我尝试从API检索数据时，无法显示此加载程序图标。

我有这样的文件夹结构：

组件
- 仪表板
  - Cards.js
  - Dashboard.js

我的Cards.js中有以下代码

constructor(props) {
    super(props);
    this.state = this.state = {
        posts: [],
        loading: false
    }
}

componentWillMount() {
    this.loadData();
}

render() {
    let data;
    if(this.state.loading) {
        data = <img data-src={ require('../images/loader.gif') } />
    } else {
        let records = this.fetchResult();

        console.log(records);

        return (
            <div className='row'>
                { records }
            </div>
        )
    }
}

// ==================================================================
loadData() {
    const path = `${url}/jira_jobs.php`;
    axios.get(path)
        .then(res  => {
            this.setState({
                posts: res['data'],
                loading: false
            });
        })
        .catch(err => {
            console.error(err);
        });
}

fetchResult() {
    let records = this.state.posts.map((post) => (
        <div key = { post.id }>
            <h3>{ post.title }</h3>
            <p>{ post.body }</p>
        </div>
    ));

    return records;
}

Answer 1

您没有在任何地方将<StackLayout class="page"> <GridLayout tkExampleTitle tkToggleNavButton> <RadListView col="1" [items]="name" selectionBehavior="LongPress" multipleSelection="true" reorderMode="Drag" backgroundColor="gray" height="100%" itemReorder="true" padding="10"> <ng-template tkListItemTemplate let-item="item"> <GridLayout> <Label [text]="item" textAlignment="center" witdh="95%" height="95%" margin="5px" padding="15px" backgroundColor="red" fontSize="30"></Label> </GridLayout> </ng-template> <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="250" spanCount="5"> </ListViewGridLayout> </RadListView> </GridLayout> </StackLayout>设置为loading。尝试在true方法的开头将load设置为true：

loadData()

由于您正在使用的诺言的异步性质，因此可以使用。

Answer 2

您没有在任何地方将loading属性设置为true。您应该在loadData函数的开头将其设置为true，如下所示：

loadData() {
    this.setState({
       loading: true
    });
    const path = `${url}/jira_jobs.php`;
    axios.get(path)
        .then(res  => {
            this.setState({
                posts: res['data'],
                loading: false
            });
        })
        .catch(err => {
            console.error(err);
        });
}

还可以在您的render方法中执行此操作：

render() {
    if(this.state.loading) {
        return <img data-src={ require('../images/loader.gif') } />;
    } else {
        let records = this.fetchResult();

        console.log(records);

        return (
            <div className='row'>
                { records }
            </div>
        )
    }
}

Answer 3

您不要在true内将加载设置为loadData，也不要从渲染器返回加载器，也不要忘记将loading设置为false错误发生时。

loadData() {
  this.setState({ loading: true });
  const path = `${url}/jira_jobs.php`;
  axios.get(path)
    .then(res => {
      this.setState({
        posts: res['data'],
        loading: false
      });
    })
    .catch(err => {
      this.setState({ loading: false });
      console.error(err);
    });
}

通过三元运算符?，您可以使用比if else

更好的语法来包含加载程序

另外，图片来源应为src，而不是data-src

render() {
  return (
    <div className='row'>
      {this.state.loading
        ? <img src={require('../images/loader.gif')} />
        : this.fetchResult()
      }
    </div>
  );
}

Answer 4

尝试使用此代码

    loadData() {
const {loading,posts}this.state
    this.setState({!loading});
    const path = `${url}/jira_jobs.php`;
    axios.get(path)
        .then(res  => {
            this.setState({
                posts: res['data'],
                !loading
            });
        })
        .catch(err => {
            console.error(err);
        });
}

告诉我是否可行

数据加载时显示加载器图标

4 个答案: