Question

我需要为组件安装一个加载微调器。我使用的是React hook useEffect，因为我使用的是redux，所以我不能在此组件中使用useState。

这是我到目前为止所获得的，并且无法按预期工作。

import React, { useEffect } from 'react';
import { fetchData } from 'lib';


export default function Example(props) {

  let isFree = false;
  let isLoading = true;

  useEffect(() => {
    async function check() {
      const result = await fetchData(123);

      isLoading = false; // I am aware of react-hooks/exhaustive-deps
      if (!result){
        isFree = true; // I am aware of react-hooks/exhaustive-deps
      }
    }
    check();

    return function cleanup() {
      isLoading = false;
    };

  })

  const bookMe = ()=> {
    if (isLoading) {
      return false;
    }

    // do something
  };

  return (
    <div
      className="column has-text-centered is-loading">
      <div
        className={
          'button is-small is-outlined ' +
          ( isLoading ? ' is-loading' : '')
        }
        onClick={bookMe}
      >
        Select this slot
      </div>
    </div>
  );
}

注意：我尝试了useRef，但没有得到答案。

注意：我可以使用下面的类组件来实现解决方案。跟随isLoading。

但是我的问题是用useEffect()和 without useState()

重写整个内容

import React, { Component } from 'react';
import { fetchData } from 'lib';

export default class Example extends Component {
  _isMounted = false;

  state = {
    isFree: false,
    isLoading: true
  };

  componentDidMount() {
    this._isMounted = true;

    fetchData(123).then(result => {
      if (this._isMounted) {
        this.setState({ isLoading: false });
      }
      if (!result) {
        if (this._isMounted) {
          this.setState({ isFree: true });
        }
      }
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  bookMe = () => {
    if (this.state.isLoading) {
      return false;
    }

    // do something
  };

  render() {
    return (
      <div
        className="column has-text-centered is-loading">
        <div
          className={
            'button is-small is-outlined ' +
            (this.state.isLoading ? ' is-loading' : '')
          }
          onClick={this.bookMe}
        >select this slot</div>
      </div>
    );
  }
}

Answer 1

我正在使用react hook useEffect，并且因为我正在使用redux，所以不能在此组件中使用useState。

实际上您可以使用useState。

问题是您要在哪里管理请求。如果您决定在组件中管理您的请求，则它必须包含状态。

一般来说，Redux更适合：

存储应用程序各个部分所需的状态。
复杂的状态管理。

MediaElementSource

在您的代码中，您没有使用useState，但是您实际上是在尝试使用状态。这是行不通的，因为每次函数都会新创建let变量。

使用react useEffect钩子和Redux而不使用useState钩子加载微调器

1 个答案: