无法在本机中读取null属性字符串

Question

I always get this error

Cannot read property 'todoText' of null in react native

for submitting a form. I'm trying to create a form that will submit the value.

import * as React from "react";
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';

interface TodoState{
    todoText?: string;
}
interface TodoProps{
    text: string;
}
export default class AddTodo extends React.Component <TodoProps,TodoState> {

    constructor(props:TodoProps){
        super(props);
        this.setState({todoText:" "});
    }

    handleSubmit = () => {
        console.log(this.state.todoText);
    }

    updateText = (text) => {
        this.setState((state) => {
            return { todoText: text };
        });
    };

    render() {
        return (
            <View style={{margin: 128, marginLeft: 15, marginRight:15}}>
                <TextInput style={styles.input} placeholder='Todo' onChangeText={(text) => this.setState({todoText:text})} value={this.state.todoText} />
                <TouchableOpacity onPress={this.handleSubmit.bind(this)}>
                    <Text style={styles.button}>Submit</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

I trying to follow this link but I always get that error. As what I have understand in react, it work the way i bind the function. I don't know if react-native has another way on doing this. I follow already the doc of it. Did I miss something about my code? But if you have tutorial that will do a form validation. That will be a great to study deeply in react native. I'm new on this technology.

Answer 1

It's about your first render, it can't find todoText . Because it's initial in the constructor is wrong. Change the constructor to this:

constructor(props:TodoProps){
    super(props);
    this.state = {
      todoText:" "
    };
}