Flow (Phản ứng Native) được đem lại cho tôi lỗi cho việc sử dụng 'this.state'

Question

dòng chảy là cho tôi những lỗi sau bất cứ khi nào tôi cố gắng sử dụng this.state trong mã của tôi:

đối tượng theo nghĩa đen: loại này không tương thích với không xác định. Bạn đã quên khai báo tham số kiểu State định danh Component:

Đây là mã vi phạm (mặc dù nó xảy ra ở những nơi khác quá):

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

Bất kỳ trợ giúp sẽ được nhiều đánh giá cao =)

Answer 1

Bạn cần xác định loại cho thuộc tính trạng thái trước khi có thể sử dụng.

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

Answer 2

xóa /* @flow */ trong bạn mã flite đầu

Answer 3

Nếu bạn đang sử dụng dòng và muốn thiết lập this.state trong của constructor thành phần của bạn:

---

1. Tạo type cho this.state

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

2. Khởi tạo thành phần của bạn với điều đó type

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

3. Bây giờ bạn có thể đặt this.state mà không cần bất kỳ dòng lỗi

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

---

Dưới đây là một nhiều com ví dụ plete cập nhật this.state với chiều rộng và chiều cao của thành phần khi gọi 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', 
    }, 
})