web-dev-qa-db-ja.com

Flow（React Native）で 'this.state'を使用するとエラーが発生します

フローでthis.stateをコードで使用しようとすると、次のエラーが表示されます。

オブジェクトリテラル：この型はundefinedと互換性がありません。識別子Stateの型パラメーターComponentを宣言するのを忘れましたか？：

問題のコードは次のとおりです（ただし、他の場所でも発生します）。

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

どんな助けも大歓迎です=）

reactjsreact-nativeflowtype
39
Michael Campsall

状態プロパティを使用するには、状態プロパティのタイプを定義する必要があります。

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

flowを使用しており、コンポーネントのconstructorにthis.stateを設定する場合：

1。this.stateのtypeを作成します

type State = { width: number, height: number }

2。そのtypeでコンポーネントを初期化します

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

。これで、flowエラーなしで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',
  },
})
25
Derek Soike

フロータイプ:anyの状態は無視できますが、これは推奨されません。あなたの状態がより大きく複雑になると、あなたは迷子になります。

class ExpandingCell extends Component {

    state: any;

    constructor(props) {
        super(props);
        this.state = {
            isExpanded: false
        };
    }
}
0
Ponleu