Question

我正在尝试使用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中没有问题，但是尝试以状态写入对象会给我带来麻烦。

有人可以在这里指出正确的方向吗？

谢谢。

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

Answer 2

您无法在编码时直接更新状态。您需要从状态中获取对象，然后更新其值，然后再次将对象存储到状态中。下面是正确的答案：

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

如何使用AsyncStorage将数据保存为对象

2 个答案: