首页 文章

在没有传递任何道具的情况下实例化Component时，流错误“props与empty不兼容”

提问于
浏览 次
4

我有一个包含在react-redux“connect”中的组件 . 组件的所有道具都由mapStateToProps和MapDispatchToProps提供，因此没有“ownProps”传递给组件 .

但是，我收到以下流错误：

Cannot create Credits element because props [1] is incompatible with empty [2].

     src/components/ChildrenView/index.js
     323│         />
     324│
     325│         {/* Credits */}
 [1] 326│         <Credits />
     327│
     328│         {/* fullscreen pictures rhat open with onClick on tge image */}
     329│         <PhotoViewer />

     flow-typed/npm/react-redux_v5.x.x.js
 [2] 110│     CP: $Diff<ElementConfig<Com>, RSP>,

1中的道具是否已空？

我正在使用flow-typed，因为你可以在错误中说明 .

这是类定义和连接调用：

type Props = {|
  ...mapStateToPropsType,
  pricingModal: typeof pricingModal,
  offlineModal: typeof offlineModal,
|}


class Credits extends React.Component<Props> { ... }


type mapStateToPropsType = {|
  balance: number,
  isVisiblePricing: boolean,
  isConnected: boolean,
  isVisibleOffline: boolean,
|}

const mapStateToProps = ({ parents, pricing, appState }: TP.State): mapStateToPropsType => ({
  balance: parents.balance || 0,
  isVisiblePricing: pricing.modalPricing,
  isConnected: appState.isConnected,
  isVisibleOffline: appState.modalOffline,
})

export default connect(mapStateToProps, { pricingModal, offlineModal })(Credits)

如何删除此错误（不使用$ FlowFixMe：/）？

编辑1

如果我在react-redux_v5.x.x.js的第110行和第114行的"connect"类型定义上进行了以下更改，则类型检查按预期工作 .

之前：

declare export function connect<
    Com: ComponentType<*>,
    S: Object,
    SP: Object,
    RSP: Object,
    MDP: Object,
    CP: $Diff<ElementConfig<Com>, RSP>,
  >(
    mapStateToProps: MapStateToProps<S, SP, RSP>,
    mapDispatchToProps: MDP,
  ): (component: Com) => ComponentType<$Diff<CP, MDP> & SP>

之后：

declare export function connect<
    Com: ComponentType<*>,
    S: Object,
    SP: Object,
    RSP: Object,
    MDP: Object,
    CP: $Diff<$Diff<ElementConfig<Com>, RSP>, MDP>, /*  <-- here */
  >(
    mapStateToProps: MapStateToProps<S, SP, RSP>,
    mapDispatchToProps: MDP,
  ): (component: Com) => ComponentType<CP & SP> /*  <-- here */
reactjs react-native react-redux flowtype

3 回答

  • 1

    我无法评论James Kraus的答案，因为我没有足够的声誉，但我可以确认更新到最新版本的flow（0.71）为我修复了它 . 我在30分钟前偶然发现了同样的问题 . 我没有必要更新流式类型的定义 . 接受詹姆斯的答案，如果它也适合你 .

    虽然，在我的情况下，我仍然必须使用$ FlowFixMe，因为我正在使用反应本机并且更新到任何高于0.67.x的版本会破坏其他所有内容 .

    回复于
  • 2

    由于我的声誉，我也无法发表评论 . 我和Alex Borgue有同样的问题 . 由于反应原生，我也坚持流量0.67.1 .

    这发生在：

    • 你传递连接一个 mapDispatchToProps 参数的对象：看起来有些东西已经关闭了，连接函数的lib def接受了一个对象，该对象是Francisco Sarmento在上面提到的 mapDispatchToProps 参数 . 如果使用函数将调度操作连接为props，则Flow似乎没有任何问题 . 该版本的connect函数的lib def略有不同，非常接近Francisco Sarmento所做的编辑 .

    • 在实例化 connect 返回的HOC时没有指定任何道具（例如，所有require参数都包含react-redux），并且

    • 您将组件用于定义它的单独文件中（例如，涉及导出和导入） . James Kraus上面提交的Flow.org/try链接让我陷入了困境 . 当我使用James 's setup. I then noticed that my local flow didn' t抱怨时，如果我在其定义的同一文件中实例化HOC，我的特定组件按预期工作 . 当我将HOC导入另一个文件时，流只会吐出 Cannot create XXX element because props [1] is incompatible with empty [2] . 我不知道这可能会产生什么影响 - 也许它与潜在原因无关，只是一个当地的环境问题 .

    回复于
  • 2

    您使用的是最新版本的Flow和Typedef吗？当我在Flow.org/try上使用最新版本的Flow和最新的typedef时，我没有看到任何错误 . 如果这没有帮助，请尝试在Flow.org/try（首选）或Github上创建问题的工作示例 .

    回复于

相关问题