flusso (Reagire nativo) mi sta dando errori per l'utilizzo di 'this.state'

Question

flusso mi sta dando il seguente errore ogni volta che provo ad usare this.state nel mio codice:

oggetto letterale: Questo tipo è incompatibile con indefinito. Hai dimenticato di dichiarare il tipo di parametro State di identificatore Component:?

Ecco il codice incriminato (anche se succede anche altrove):

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

Qualsiasi aiuto sarebbe molto apprezzato =)

Answer 1

È necessario definire un tipo per la proprietà di stato prima di poterlo utilizzare.

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

Answer 2

eliminare il /* @flow */ in voi codice Flite superiore

Answer 3

Se stai usando flusso e si desidera impostare this.state in del constructor componente:

---

1. Crea una type per this.state

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

2. inizializzare il componente che type

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

3. Ora è possibile impostare this.state senza flusso errori

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

---

Ecco un altro com esempio completo che aggiorna this.state con la larghezza e l'altezza del componente quando viene chiamato 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', 
    }, 
})