代码之家  ›  专栏  ›  技术社区  ›  Michael Kropat

我可以用PropTypes来表达道具是一种承诺吗?

  •  0
  • Michael Kropat  · 技术社区  · 5 年前

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

    如果我有一个组件接受一个prop,它的值可以是一个promise,那么有没有什么方法可以使用PropTypes来表达?我在想象一些直接的东西 PropTypes.promise

    下面是一个高度简化的示例来展示我的预期用例:

    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() { /* ... */ }
    }
    
    1 回复  |  直到 4 年前
        1
  •  9
  •   nicholascm    5 年前

    你可以用一个特定形状的物体,例如。

      PropTypes.shape({
         then: PropTypes.func.isRequired,
         catch: PropTypes.func.isRequired
      })
    
        2
  •  4
  •   Daniel Bank    4 年前

    PropTypes.instanceOf() . 重要提示:只有当您的promises是Promise类的实例时,这才有效:

    static propTypes = {
      someDataPromise: PropTypes.instanceOf(Promise)
    }
    
        3
  •  2
  •   Parav01d    5 年前

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

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