Flow（React Native）给我使用“this.state”的错误

Posted 2023-03-08

【中文标题】Flow（React Native）给我使用“this.state”的错误

【英文标题】：Flow (React Native) is giving me errors for using 'this.state'

【发布时间】：2016-08-20 00:16:28

【问题描述】：

每当我尝试在代码中使用 this.state 时，Flow 都会给我以下错误：

对象字面量： 此类型不兼容 不明确的。你忘了声明标识符Component的类型参数State吗？：

这是有问题的代码（尽管它也发生在其他地方）：

class ExpandingCell extends Component 
    constructor(props) 
    super(props);
    this.state = 
        isExpanded: false
    ;

任何帮助将不胜感激 =)

【问题讨论】：

你能把其他的功能贴出来吗？

【参考方案1】：

您需要为 state 属性定义一个类型才能使用它。

class ComponentA extends Component 
    state: 
        isExpanded: Boolean
    ;
    constructor(props) 
        super(props);
        this.state = 
            isExpanded: false
        ;
    

【讨论】：

这确实是答案，谢谢！尽管出现此错误，我仍然不清楚为什么该应用程序仍在运行...

尽管出现错误，应用程序仍在运行的原因是应用程序不需要它。 Flow 需要它能够正确地进行类型检查，而不是实际的应用程序。

如果我可以让流程忽略该错误，那就太好了 =)

@MichaelCampsall 您始终可以完全禁用流程。它是一个静态类型检查器，可帮助您编写富有表现力的代码，但对于任何类型的 JS 项目（不仅是 React Native），它都是完全可选的。

Rihat 在 12 月 23 日的编辑意味着这个答案现在有无效的语法。请有特权的人回滚。在 Flow 中输入注释使用 ':' - 它应该是 state: isExpanded: Boolean; ;

【参考方案2】：

删除代码顶部的/* @flow */

【讨论】：

应该提供更多上下文，包括可能的选项...即纠正流程设置或在不需要时禁用。

【参考方案3】：

如果您正在使用 flow 并希望在组件的 constructor 中设置 this.state：

---

1.为this.state创建一个type

type State =  width: number, height: number 

2.用type初始化你的组件

export default class MyComponent extends Component<Props, State>  ... 

3.现在您可以设置this.state，而不会出现任何流错误

  constructor(props: any) 
    super(props)
    this.state =  width: 0, height: 0 
  

---

这是一个更完整的示例，在调用 onLayout 时使用组件的宽度和高度更新 this.state。

// @flow

import React, Component from 'react'
import View from 'react-native'

type Props = 
  someNumber: number,
  someBool: boolean,
  someFxn: () => any,


type State = 
  width: number,
  height: number,


export default class MyComponent extends Component<Props, State> 

  constructor(props: any) 
    super(props)

    this.state = 
      width: 0,
      height: 0,
    
  

  render() 

    const onLayout = (event) => 
      const x, y, width, height = event.nativeEvent.layout
      this.setState(
        ...this.state,
        width: width,
        width: height,
      )
    

    return (
      <View style=styles.container onLayout=onLayout>

        ...

      </View>
    )
  


const styles = StyleSheet.create(
  container: 
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  ,
)

【讨论】：

如何利用Props的类型定义？

这行得通，但我不知道为什么必须将 Props 作为类型传入。 Props 中的三个属性实际上并未在代码示例中使用。但是，如果我消除了 Props 类型，则此代码不会消除原始帖子中引用的流错误。

这有效，而这个问题的旧答案没有。

@amoldbird ..你能找到解释吗？？

【参考方案4】：

您可以忽略流类型为:any 的状态，但不建议这样做。当你的状态变得更大更复杂时，你会迷失方向。

class ExpandingCell extends Component 

    state: any;

    constructor(props) 
        super(props);
        this.state = 
            isExpanded: false
        ;