Menu
Flow is giving me the following error whenever I try to use this.state in my code:
object literal: This type is incompatible with undefined. Did you forget to declare type parameter
Stateof identifierComponent?:
Here is the offending code (though it happens elsewhere too):
class ExpandingCell extends Component { constructor(props) { super(props); this.state = { isExpanded: false }; } Any help would be much appreciated =)
812
Flow will help you prevent bugs and allow for better code documentation among other things. A lot of the React Native documentation and source code already also uses flow, so there has never been a better time to start using it!
The most common way to set state in React Native is by using React's setState() method. We also have the Context API to avoid prop drilling and pass the state down many levels without passing it to individual children in the tree.
Unfortunately, there isn't a built-in way for us to reset the state of the component to its initial state, so we have to extract the initial state into a variable. When you manage state using the useState hook, all you have to do is call your setState function passing it the initial state.
state , we use this. setState() . This is a function available to all React components that use state, and allows us to let React know that the component state has changed. This way the component knows it should re-render, because its state has changed and its UI will most likely also change.
You need to define a type for the state property in order to use it.
class ComponentA extends Component { state: { isExpanded: Boolean }; constructor(props) { super(props); this.state = { isExpanded: false }; } } If you're using flow and want to set this.state in your component's constructor:
1. Create a type for this.state
type State = { width: number, height: number } 2. Initialize your component with that type
export default class MyComponent extends Component<Props, State> { ... } 3. Now you can set this.state without any flow errors
constructor(props: any) { super(props) this.state = { width: 0, height: 0 } } Here's a more complete example that updates this.state with the width and height of the component when onLayout is called.
// @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', }, }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
