我可以使用道具类型来表示道具是一个promise吗？

Question

PropType对调试很有帮助，因为当期望未得到满足时，它们会显示警告。除此之外，它们还很好地表达了组件应该如何使用的意图。

如果我有一个组件，它接受一个可能是promise的值的prop，是否有某种方法可以使用PropType来表达？我想象的要么是像PropTypes.promise这样的直接的东西，要么是使用构建块PropType来表达“thable”概念的某种方式。

下面是一个高度简化的示例，展示了我的预期用例：

class SomeComponent extends Component {
  static propTypes = {
    someDataPromise: PropTypes.object // <-- can I be more expressive here?
  }

  state = {
    isLoading: false
  }

  async handleSubmit() {
    this.setState({ isLoading: true });

    const data = await this.props.someDataPromise;
    const response = await fetch(`/some/api/endpoint?data=${data}`);
    // do something with the response

    this.setState({ isLoading: false });
  }

  render() { /* ... */ }
}

Answer 1

我认为你不应该这样想。React只是一个高级模板引擎，这意味着您拥有数据的“状态”和表示该状态的视图。使用promise作为属性意味着您有一个未定义的状态，这在视图组件方面很难表示。这是编程的主要问题，您可以做任何您想做的事情，但是当您使用框架时，您应该遵循框架的理念。

长话短说，不要把promise当作财产。在将属性传递给视图组件之前，请确保处于有效的确定状态。也许像redux这样的带有thunk或redux观测值的全局状态将帮助您处理异步信息。

Answer 2

另一种表达道具promise的方式是使用PropTypes。instanceOf（）。重要提示：这仅在您的promise是Promise类的实例时有效：

static propTypes = {
  someDataPromise: PropTypes.instanceOf(Promise)
}

Answer 3

您可以使用具有特定形状的对象，例如。

  PropTypes.shape({
     then: PropTypes.func.isRequired,
     catch: PropTypes.func.isRequired
  })