我可以使用 PropTypes 来表示一个 prop 是一个 Promise 吗？

Question

PropTypes 有助于调试，因为它们会在未满足预期时显示警告。除此之外，它们还很好地表达了组件的使用意图。

如果我有一个组件接受一个 prop，其值可以是一个 promise，有没有什么方法可以使用 PropTypes 来表达它？我正在描绘一些直接的东西，比如 PropTypes.promise，或者某种使用构建块 PropTypes 来表达 "thenable" 概念的方式。

这是一个高度简化的示例，用于展示我的预期用例：

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

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

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

Answer 2

我不认为那是你应该思考的方式。 React 只不过是一个高级模板引擎，这意味着您拥有 "state" 数据和表示此状态的视图。使用 promise 作为属性意味着你有一个未定义的状态，这在视图组件方面真的很难表示。这是编程的主要问题，你可以为所欲为，但是当你使用框架时，你应该遵循框架的哲学。

长话短说，不要像属性那样使用承诺。在将属性传递给视图组件之前确保有效的确定性状态。也许像 redux with thunk 或 redux observables 这样的全局状态会帮助你处理异步信息。

Answer 3

另一种表示 prop 是 Promise 的方法是使用 PropTypes.instanceOf()。重要警告：这仅在您的承诺是 Promise class:

的实例时才有效

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

我可以使用 PropTypes 来表示一个 prop 是一个 Promise 吗？

Can I use PropTypes to express that a prop is a Promise?

javascript

reactjs

react-proptypes