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秒，这会加载一些资源。之后，将状态属性busy设置为false，使您可以使用toggle函数。这是因为toggle总是在忙碌时返回（请参见toggle方法的第一行）。

Answer 2

首先，不应有任何 setTimeout函数 ，并且如果可能的话，请以适当的 fallback条件处理您的响应，这样就不会有任何问题键或控制台错误。

在这种情况下，您可以使用 loader直到您的响应出现。并且一旦您的响应来，请禁用您的加载程序。

代码：

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

渲染react组件时如何摆脱3秒的延迟？

2 个答案: