渲染react組件時如何擺脫3秒的延遲？

Question

預先致歉，但我目前是React的初學者。

我目前正在使用切換按鈕，但是切換按鈕的動作似乎不是即時的，而是大約需要3秒鍾。 我已經嘗試過在網上詢問人們，但是到目前為止，我仍然不確定為什么會出現這種情況。

Index.jsx

import React from 'react';

import * as resources from 'home/resources/settings/utility';
import View from './View';

class SettingsUtility extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      busy: true,
      value: false,
      tempValue: false,
    };
    this.toggle = this.toggle.bind(this);
  }

  componentDidMount() {
    // delay to avoid 401 since this loads user at the same time with
    // global user loading
    setTimeout(() => {
      resources.load().then(response => {
        this.setState({ busy: false, value: response, tempValue: response });
      });
    }, 2000);
  }

  toggle() {
    if (this.state.busy) { return; }
    const tempValue = !this.state.tempValue;
    this.setState({ busy: true, tempValue });
    resources.update(tempValue)
      .then(response => {
        this.setState({
          busy: false,
          value: response,
          tempValue: response,
        });
      }).catch(() => {
        this.setState({
          busy: false,
          tempValue: !tempValue,
        });
      });
  }

  render() {
    return (
      <View {...this.props} {...this.state} toggle={this.toggle} />
    );
  }
}

export default SettingsUtility;

View.jsx

import T from 'prop-types';
import React from 'react';

import Toggle from 'core/components/Input/Toggle';
import Hint from 'core/components/Hint';

import translate from './translate';
import s from '../styles.css';

const SettingsUtilityView = ({ id, busy, value, tempValue, toggle }) => (
  <div className={s.item}>
    <h4>{translate('header')}</h4>
    <p className={s.content}>
      {translate('message')}
      <Hint hint={translate('hint')} />
    </p>
    <p className={s.content}>
      {translate('note')}
    </p>
    <div>
      <Toggle id={`${id}--daily`} value={tempValue} onChange={toggle} busy={busy} />
      <span className={s.toggleText}>
        {value ? translate('on') : translate('off')}
      </span>
    </div>
  </div>
);

SettingsUtilityView.propTypes = {
  id: T.string.isRequired,
  busy: T.bool.isRequired,
  value: T.bool.isRequired,
  tempValue: T.bool.isRequired,
  toggle: T.func.isRequired,
};

export default SettingsUtilityView;

我認為CSS不會有任何問題，但代碼會更有效嗎？

謝謝

Answer 1

在componentDidMount您將設置2秒鍾的超時，這將加載一些資源。 之后，將state屬性busy設置為false ，這使您可以使用toggle功能。 這是因為toggle總是在繁忙時返回（請參見toggle方法的第一行）。

Answer 2

首先，不應該有任何setTimeout函數 ，並且如果可能的話，請以適當的后備條件處理您的響應，這樣就不會有任何鍵或控制台錯誤。

在這種情況下，您可以使用加載程序，直到收到響應為止 。 並且一旦您的響應來禁用您的加載程序。

碼：

       componentWillMount() {
               this.setState({pageLoader: true})
               resources.load().then(response => {
                this.setState({ busy: false, value: response, tempValue: response },
()=>{this.setState({pageLoader: false})});
              });
            };