javascript - 来自 Cloud Storage 的图像未在 .map 列表中重新渲染

Question

我正在从我的 Firebase Cloud Firestore 获取 .map 中的帖子列表。我也有连接到每个帖子的照片，我使用post.title + '.jpg'Cloud Storage 获取它们。帖子标题很吸引人，但是使用时fetchImage它没有显示在帖子中。它显示在 console.log 中。我也可以从控制台访问 url，所以那里没有错。

有任何想法吗？

{this.state.posts.map((post, i) => {
  let fetchImage
  firebase
  .storage()
  .ref(post.title + '.jpg')
  .getDownloadURL()
  .then((url) => {
    console.log(url)
    fetchImage = url;
  });
  return (
    <Text>{post.title}</Text>
    <Image
      style={styles.image}
      source={{
      uri: fetchImage
      }}
    />
  )}
)}

标签： javascriptreactjsreact-nativegoogle-cloud-storagefirebase-storage

Answer 1

ReactJS 的 this.props.items.map 属性是什么？

这应该可以帮助您理解有关使用“map”方法遍历和显示代表 ReactJS 组件的类似对象列表的概念。标题“this.props.items.map”可以是任何其他映射方法，例如“this.props.profiles.map”，下面有配置文件或项目表示数组的示例。它可用于创建列表、表格等。

以下是本文的主要观点：

• Map 不是 ReactJS 的一个特性
• 在 this.props.profiles.map 的上下文中查看使用“map”的代码示例

在查看此ReactJS 教程页面上提供的教程后，其中引用了 .map 来显示 Comment 对象，您可能会感到困惑并认为“map”是 ReactJS 的一项功能。事实上，这是一个标准的 JavaScript 函数，可以在任何数组上调用

如果您使用过 Python（apply 方法）或 R（lapply 方法）等语言，您可能使用过“map”作为传递函数的方法，该函数的参数表示存储在数组中的对象的引用。当调用“map”时，该函数将应用于存储在数组中的每个对象。“map”返回一个新数组，该数组由可能使用传递数组的对象创建的对象组成

一般语法是：array.map(func)

其中 func 应采用一个参数。

如上文所述，array.map 的返回值是另一个数组。

在 this.props.profiles.map 的上下文中使用“map”的代码示例

在下面的示例中，请注意以下一些事项：

• 有两个组件，例如 UserProfiles 和 Profile
• 配置文件组件用于表示由名称和国家属性组成的实际配置文件。
• 听起来，UserProfiles 用于表示一个或多个配置文件并呈现配置文件组件。
• 请注意，UserProfiles 被传递了一个 json 对象，例如 profilesJson，它由以 JSON 对象形式表示的配置文件组成。
• UserProfiles 的 render 方法显示使用“map”方法创建的“allProfiles”变量。反过来，“map”方法返回一个数组 Profile 对象。

以下是以下代码示例在 HTML 上的显示方式：

<div id="content"></div>
<script type="text/jsx">
var profilesJson = [
{name: "Pete Hunt", country: "USA"},
{name: "Jordan Walke", country: "Australia"}];
var Profile = React.createClass({
render: function(){
          return(
              <div>
<div>Name: {this.props.name}</div>
<div>Country: {this.props.country}</div>
<hr/>
     </div>
);
    }
});
var UserProfiles = React.createClass({
render: function(){
var allProfiles = this.props.profiles.map(function(profile){
return (
<Profile name={profile.name} country={profile.country} />
);
});
return(
<div>{allProfiles}</div>
);
}
});
React.render( <UserProfiles profiles={profilesJson}/>, document.getElementById( "content"));</script>