时间戳

首页 > 解决方案 > 在不传递任何道具的情况下实例化组件时出现流错误“道具与空不兼容”

reactjs - 在不传递任何道具的情况下实例化组件时出现流错误“道具与空不兼容”

问题描述

我有一个包含在 react-redux“连接”中的组件。组件的所有 props 都由 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中的道具不是已经空了吗？

我正在使用流类型，您可以在错误中说明。

这是类定义和连接调用：

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.xxjs的第 110 行和第 114 行的“连接”类型定义进行以下更改，则类型检查将按预期工作。

前：

  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 */

标签： reactjsreact-nativereact-reduxflowtype

解决方案

由于我的声誉，我也无法发表评论。我遇到了和 Alex Borgue 完全相同的问题。由于 react-native，我也被困在流 0.67.1 上。

这发生在：

  1. 您为参数传递了一个对象mapDispatchToProps：看起来连接函数的 lib def 出现了问题，该函数将对象用于上述mapDispatchToProps弗朗西斯科·萨门托（Francisco Sarmento）指出的参数。如果您使用函数将调度操作作为道具连接起来，Flow 似乎没有任何问题。该版本的 connect 函数的 lib def 略有不同，并且非常接近 Francisco Sarmento 所做的编辑。
  2. 在实例化由 , 返回的 HOC 时，您没有指定任何道具connect（例如，所有需要的参数都包含在 react-redux 中），并且
  3. 您在定义组件的单独文件中使用组件（例如，涉及导出和导入）。James Kraus 在上面提交的 Flow.org/try 链接让我陷入了困境。当我使用 James 的设置运行它时，我的特定组件按预期工作。Cannot create XXX element because props [1] is incompatible with empty [2]然后我注意到，如果我在定义它的同一个文件中实例化 HOC，我的本地流程不会抱怨。只有当我将 HOC 导入另一个文件时，流程才会吐出。我不知道这可能会产生什么潜在影响——也许它与根本原因无关，只是当地环境问题。

推荐阅读