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

#react-native #state #asyncstorage

#react-native #состояние #asyncstorage

Вопрос:

Я пытаюсь сохранить некоторую базовую информацию о пользователе (имя, адрес, номер телефона и т.д.) с помощью 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, но попытка записи в объект в состоянии вызывает у меня проблемы.

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

Спасибо.

1. Вам нужно изменить на strign, прежде чем устанавливать их в AsyncStorage. Используйте это для установки AsyncStorage.setItem('user', JSON.stringify(this.state.user)) , а это для получения const user = await AsyncStorage.getItem('user') , а затем this.setState({ user: JSON.parse(user) })

2. @sinan это имеет смысл, однако внесение этого изменения не влияет на ошибку. Я думаю, это потому, что фактическое назначение this.state.user внутри моего текстового поля onChange()

Ответ №1:

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

 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>
        );
    }
}

1. Я попробовал это решение, и у меня возникла точно такая же проблема. Я думаю, что проблема кроется где-то еще, кроме функции setUser(), тем более, что моя ошибка указывает не на это

Ответ №2:

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

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