reactjs - 在不传递任何 props 的情况下实例化组件时出现流错误 "props is incompatible with empty"

Question

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

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

这是类定义和连接调用:

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

Answer 1

我无法对 James Kraus 的回答发表评论，因为我没有足够的声誉，但我可以确认更新到最新版本的 flow (0.71) 已为我解决了这个问题。 30 分钟前我确实偶然发现了同样的问题。我不必更新流类型定义。如果詹姆斯的回答也对你有用，请接受它。

尽管如此，就我而言，我仍然需要使用 $FlowFixMe，因为我使用的是 React-native，并且更新到任何高于 0.67.x 的版本都会破坏其他一切。