更新firebase用户图片直到重新加载应用程序才呈现新照片答案

【问题标题】：Updating firebase user picture not rendering new photo until reloading app更新firebase用户图片直到重新加载应用程序才呈现新照片
【发布时间】：2019-02-10 21:17:54
【问题描述】：

我正在更新用户个人资料图片，并且能够看到数据库中的图片发生变化。我将图像的位置存储在个人资料图片中。我能够在重新加载应用程序时看到发生的变化，并且能够立即看到 firebase 存储中的图像发生变化。

结构如下：

这是我用来更改图像的功能：

export const changeUserAvatar = (userId, imageUrl) => {
    firebaseService
      .database()
      .ref('users/' + userId)
      .update({
        profilePicture: imageUrl
      });
  };

这是我渲染图像的方式：

<Avatar size="xlarge" rounded source={{ uri: this.props.profilePicture }} onPress={this.openPicker}/> :

我正在使用 redux 来管理状态，并认为它会自动重新渲染并更新个人资料图片的值。我已经尝试了这里的所有内容：

https://github.com/facebook/react-native/issues/9195

https://github.com/facebook/react-native/issues/12606

当我尝试添加这样的东西时，我根本没有得到图像，它显示为一个空白屏幕：

{{uri: profilePicture + '?' + new Date()}}

当我导航回我的消息列表/图片仅在我在应用程序上进行硬重新加载时，我面临同样的问题。

【问题讨论】：

你是如何为你的组件提供 URL 的？将 URL 上传到 firebase 并调度操作后，您是否获得了 URL？你如何更新profilePicture 值？
我正在调度用户成功的操作，但只是从 changeUserAvatar 函数更新 URL。这可能是问题/我将如何调度发送新配置文件值的操作。我想，因为我正在更改数据库中的实际值并通过映射状态加载 URL 以支持组件，所以组件会看到并重新渲染。

标签： firebase react-native rendering react-props react-native-elements

【解决方案1】：

我终于解决了这个问题：

componentDidUpdate(prevProps) {
    if (this.props.photoUrl && prevProps.photoUrl !== this.props.photoUrl) {
        this.setState({ profilePicture: this.props.photoUrl })
    }
}

基本上，我只是决定将新图片存储为状态。

【讨论】：