數據加載時顯示加載器圖標

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

您沒有在任何地方將loading設置為true 。 嘗試在loadData()方法的開頭將loading設置為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);
        });
}

由於您正在使用的Promise的異步性質，因此可以使用此方法。

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

您不要在loadData中將loading設置為true ，也不要從render返回加載器，也不要忘記在發生錯誤時將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);
        });
}

告訴我是否有效