Question

我通过componentDidMount内部的异步调用填充状态。如果提取失败，我想重定向用户。重定向是通过<PageNotFound />组件完成的。见下文：

class Product extends React.Component {
  constructor(props) {
    super(props);
  }

 componentDidMount() {
    getProduct(this.props.productId).then(product =>
      this.setState({ product })
    );
  }

 render() {
    return this.state.product ? (
      <ProductView product={product}/>
    ) : (
      <PageNotFound />
    );
  }
}

问题在于React在异步调用完成之前正在运行render()方法。这导致在异步调用完成之前重定向用户。我能看到的唯一解决方法是在状态上添加一个额外的isLoading标志，但是我想知道是否还有其他解决方法。

Answer 1

加载标志是正确的方法。从用户的角度考虑。在异步调用完成之前，用户应该看到什么。无论是什么，都应该在获取阶段进行渲染。因此，组件UI有三种可能性：

在获取阶段
获取阶段之后-ProductView
获取阶段之后-重定向

是的，您需要再添加一个标志来维持两个以上的状态。

Answer 2

Easwar建议的答案

class Product extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fetchingProduct: true }
  }

  componentDidMount() {
    getProduct(this.props.productId)
      .then(product => this.setState({ product, fetchingProduct: false }))
      .catch(() => this.setState({ fetchingProduct: false }))
  }

  render() {
    return fetchingProduct ? (
      this.state.product ? (
          <ProductView product={product}/>
      ) : (
          <PageNotFound />
      )
    ) : (
        <LoadingComponent />
    )
  }
}

反应延迟渲染直到异步componentDidMount

2 个答案: