reactjs - props - Flow(React Native) me está dando errores al usar ''this.state''

react component props state

Question

Flow me da el siguiente error cada vez que trato de usar this.state en mi código:

literal del objeto: este tipo es incompatible con undefined. ¿Olvidó declarar el parámetro de tipo State del identificador Component ?

Aquí está el código ofensivo (aunque también pasa en otro lugar):

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

Cualquier ayuda sería muy apreciada =)

Answer 1

Debe definir un tipo para la propiedad de estado antes de poder usarlo.

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

Answer 2

Si está utilizando flujo y desea establecer this.state en el constructor su componente:

1. Cree un type para this.state

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

2. Inicializa tu componente con ese type

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

3. Ahora puede establecer this.state sin ningún error de flujo

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

Aquí hay un ejemplo más completo que actualiza this.state con el ancho y alto del componente cuando se llama onLayout .

// @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'',
  },
})

Answer 3

elimine el /* @flow */ en su código flite top