javascript - 动态更新存储项

Question

我的应用程序上有以下两个屏幕，一个登录屏幕，用于验证用户身份并在存储中设置 user_meta 项目。配置文件屏幕抓取 user_meta 项并显示它，但是，当我更改用户元时，它在数据库端工作，但我无法正确更新存储以显示此更改。

问题:我的身份验证屏幕和设置存储项目完美运行，我也可以在配置文件屏幕上正确显示用户元项目。问题是如果用户更改配置文件屏幕上的存储项目，则更新它。

////Login Screen////
  render() {
    return (
      <SafeAreaView>
                    <Form>
                        <Item floatingLabel>
                            <Label>Email</Label>
                            <Input onChangeText={(text) => this.setState({email:text})} />
                        </Item>
                        <Item floatingLabel last>
                            <Label>Password</Label>
                            <Input secureTextEntry onChangeText={(text) => this.setState({password:text})} />
                        </Item>
                        <Button block success style={{ marginTop: 50 }} onPress={() => {
                                this.validate();
                        }} >
                            <Text>Authenticate</Text>
                        </Button>
                    </Form>
      </SafeAreaView>
    );
  }

  validate(){
        this.setState({ validating: true });

        let formData = new FormData();
        formData.append('username', this.state.email);
        formData.append('password', this.state.password);

        return fetch('myLoginAPI', {
            method: 'POST',
            body: formData
        })
            .then((response) => response.json())

            .then((responseJson) => {

                let data = responseJson;

                if (this.saveToStorage(data)){
                    this.setState({
                        validating: false
                    });
                }
            })
    }

      async saveToStorage(userData){
            if (userData) {
                await AsyncStorage.setItem('user', JSON.stringify({
                        authToken: userData.cookie,
                        id: userData.user.id,
                        userName: userData.user.username,
                        favoriteColor: userData.user.favoriteColor,
                    })
                );
            }
            return false;
        }
  }

////Profile Screen////
  constructor(props) {
    super(props);
    this.state = {
      favoriteColor: ''
    };
  }

componentDidMount() {
    this.getFavoriteColor()
  }

getFavoriteColor = async () => {
AsyncStorage.getItem('user')
.then((value) => {
  const data = JSON.parse(value);
   this.setState({ favoriteColor: data.favoriteColor });
});
}
  changeFavoriteColor() {
    axios
         .get("myapi/userid='5'&metakey='favoriteColor'&value='blue'")
         .then(response => {
           alert(response.status);
         });
  }

  render() {
    return (
      <ScrollView/>
            <View>
            ///Displays Favorite Color from Storage///
            <Text>{this.state.favoriteColor}</Text>

           <Button
            onPress={() => this.changeFavoriteColor()}
            title="Change Favorite Color to Blue"
            />

            </View>
      </ScrollView>
    );
  }
}

这个函数 changeFavoriteColor() 确实有效，它会更改数据库端的用户元数据，因此我的 API 调用没有问题。我不确定如何更新存储项目以显示此更新。

Answer 1

您说您已成功将数据存储在 DB 中，但您正在从异步存储库导入数据。因此，异步存储数据也必须改变。

  async changeFavoriteColor() {
    let response = await axios.get("myapi/userid='5'&metakey='favoriteColor'&value='blue'")
    alert(response.status);
    let userdata = await AsyncStorage.getItem('user')
    let data = JSON.parse(userdata);
    data.favoriteColor = "blue"
    await AsyncStorage.setItem('user', JSON.stringify(data))
  }