Как сохранить данные как объект с AsyncStorage - PullRequest
Новая
       12

Как сохранить данные как объект с AsyncStorage

0 голосов
/ 11 апреля 2019

Я пытаюсь сохранить базовую информацию о пользователе (имя, адрес, номер телефона и т. Д.) С помощью AsyncStorage.

Я хочу сохранить эту информацию в объекте так: 

  user: {
            complete: '',
            fname: '',
            lname: '',
            email: '',
            phone: '',
            street: '',
            city: '',
            state: '',
            zip: '',
            phone: ''
        }

У меня есть простая страница с текстовым полем и кнопкой, чтобы проверить это. текстовое поле будет для ввода значения «fname» моего пользовательского объекта, а кнопка просто отправляет его в asyncStorage: 

export default class UserInfo extends React.Component {
    static navigationOptions = {
        title: "Coming soon!"
    };
    state = {
        user: {
            complete: '',
            fname: '',
            lname: '',
            email: '',
            phone: '',
            street: '',
            city: '',
            state: '',
            zip: '',
            phone: ''
        },
        isLoading: true
    }
    componentDidMount = () => AsyncStorage.getItem('user').then((value) => this.setState({ 'user': value, isLoading: false}))
    setUser = (value) => {
        AsyncStorage.setItem('user', value);
     }
    render() {
        if(this.state.isLoading) {
            return (<ActivityIndicator/>)
        }
        return (
            <View>
                <TextInput
                        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                        onChangeText={(text) => this.state.user.fname}/>
                <Button title="submit" onPress = {() => {this.setUser(this.state.user)}}/>
            </View>
        );
    }
}

К сожалению, я, кажется, зацепился за эту строку: 

onChangeText={(text) => this.state.user.fname}/>

Я получаю следующую ошибку: null is not an object (evaluating '_this2.state.user.fname')

Я не уверен, в чем здесь дело, у меня не было проблем с хранением простых строк в asyncStorage, но попытка записи в объект в состоянии доставляет мне проблемы.

Может ли кто-нибудь указать мне правильное направление здесь?

Спасибо.

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

Используйте это как: 

export default class UserInfo extends React.Component {
    static navigationOptions = {
        title: "Coming soon!"
    };
    state = {
        user: {
            complete: '',
            fname: '',
            lname: '',
            email: '',
            phone: '',
            street: '',
            city: '',
            state: '',
            zip: '',
            phone: ''
        },
        isLoading: true
    }
    componentDidMount = () => AsyncStorage.getItem('user').then((value) => this.setState({ 'user': value, isLoading: false}))
    setUser = () => {
        this.setState({user:this.state.user},()=>{
          AsyncStorage.setItem('user', this.state.user);
        })
     }
    render() {
        if(this.state.isLoading) {
            return (<ActivityIndicator/>)
        }
        return (
            <View>
                <TextInput
                        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                        onChangeText={(text) => this.state.user.fname}/>
                <Button title="submit" onPress = {() => {this.setUser()}}/>
            </View>
        );
    }
}
0 голосов
/ 11 апреля 2019

Вы не можете напрямую обновлять состояние при кодировании. Вам нужно вывести объект из состояния, затем обновить его значение и затем снова сохранить объект в состоянии. Ниже правильный ответ: 

onChangeText={(text) => {
   let user = this.state.user
    user.fname = text
    this.setState({
        user
     })
}}/>
...