Undefined is not a Object in constructor() method

Question

Below is my code

class ApplyForm extends Component {
    constructor(props) {
        super(props);
        this.getType = this.getType.bind(this);
        this.state = {
            accessToken: '',
            accountsComapny: '',
            type: this.getType(),
        };
    }
    async componentDidMount() {
        await this.getToken();
        const token = 'Token ' + this.state.accessToken;
        this.loadAccountsComapnyData(token);
    }
    getType() {
        if (this.state.accountsComapny) {   // Error Line
            AccountsList = t.enums(this.state.accountsComapny.accounts);
        }
        return t.struct({
            amount: t.Number,
            Purpose: LoanPurpose,
            Time: t.Number,
            Frequency: Frequency,
            FirstPayment: t.Date,
            SelectAccount: AccountsList
        });
    }
    render() {
        return (
            <Container theme={theme} style={styles.bg} >
                    <Content >
                        <View style={styles.TransactionFormcontainer}>
                            <Form
                              ref="form"
                              type={this.state.type}
                              options={options}
                            />
                            <Button
                                rounded primary block
                                onPress={this.createNewLoan.bind(this)}
                                style={styles.submitBtn} textStyle={{ fontSize: 17 }}
                            >
                                Apply
                            </Button>
                        </View>
                    </Content>
                </Image>
            </Container>
        );
    }
}

I am generating dynamic options in select box(SelectAccount field) using getType() method.

But it throws below error when i call getType() in constructor method.

Undefined is not a Object(evaluating 'this.state.accountsComapny')

Answer 1

make type initially hard coded what ever you want like

this.state = {
    accessToken: <your value>,
    accountsCompany: <your value>,
    type: t.struct({
            amount: t.Number,
            Purpose: LoanPurpose,
            Time: t.Number,
            Frequency: Frequency,
            FirstPayment: t.Date,
            SelectAccount: AccountsList
        });
}

and update type in function componentWillUpdate() as

componentWillUpdate() {
    type = this.getType();
}

hope this works.

idea is to call this.getType() when you are sure that this.state.accountsCompany do have a value

Answer 2

You use getType() creating this.state object, and in getType() you wan't to access it. It won't work, this.state is not created yet.

if (this.state.accountsComapny) {   // Error Line
    AccountsList = t.enums(this.state.accountsComapny.accounts);
}

Above condition is false in your constructor, and I cannot see any other places you use getType() method. Are you sure you need this condition?