Javascript 云存储中的图像未在.map列表中重新定义

我正在制作一个从Firebase云Firestore获取的.map中的帖子列表。我还将照片连接到每个帖子，并使用云存储中的

post.title+'.jpg'

获取它们。文章标题很吸引人，但是当使用

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

{this.state.posts.map（（post，i）=>{
让我们抓取图像
火基
.储存
.ref（post.title+“.jpg”）
.getDownloadURL（）
。然后（（url）=>{
console.log（url）
fetchImage=url；
});
返回(
{post.title}
)}
)}

下载URL是异步加载的。要了解这意味着什么，请放置一些日志语句：

console.log("Before calling getDownloadURL")
firebase
.storage()
.ref(post.title + '.jpg')
.getDownloadURL()
.then((url) => {
  console.log("Got URL")
});
console.log("After calling getDownloadURL")

运行此代码时，您会得到：

在调用getDownloadURL之前

调用getDownloadURL后

获取URL

这可能不是您期望的输出顺序。但是它完全解释了为什么您的

返回
没有返回下载URL：它还没有被加载

调用
getDownloadURL
的
then（）
回调在
return
使用
uri:fetchImage
的组件之后运行。您不能返回尚未加载的值

React中的常见解决方案是存储异步加载到组件状态的任何数据

this.state.posts.map((post, i) => {
  let fetchImage
  firebase
  .storage()
  .ref(post.title + '.jpg')
  .getDownloadURL()
  .then((url) => {
    let state = {};
    state[post.title+"_url"] = url
    this.setState(state)
  });
})

由于对
setState（）
的任何调用都会强制组件重新渲染自身，因此新的渲染将从状态中拾取更新的下载URL

return (
  <Text>{post.title}</Text>
  <Image
    style={styles.image}
    source={{
    uri: this.state[post.title+"_url"]
    }}
  />

返回(
{post.title}
我怀疑，在这个函数返回文本和图像组件的时候，从服务器获取图像的承诺还没有得到解决，因此什么也不显示，一旦承诺完成，组件也不会重新呈现

在React组件中获取外部资源的典型方法是使用类component/PureComponent语法，在componentDidMount钩子中发送一个获取请求，并将promise返回的数据保存在状态中（使用this.setState）

render函数应基于状态中的值进行渲染——这样，一旦状态用获取的值更新，组件将使用获取的数据重新渲染。
什么是ReactJS this.props.items.map属性？

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

以下是本文的要点：


地图不是ReactJS的一个功能
请参阅在上下文中使用“map”的代码示例
此.props.profiles.map

在阅读了本页提供的教程后，您可能会感到困惑，认为“map”是ReactJS特性。事实上，这是一个标准JavaScript函数，可以在任何数组上调用

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

一般语法是：
array.map（func）

其中func应采用一个参数

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

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

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


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

以下是如何在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>


var profilesJson=[
{姓名：“皮特·亨特”，国家：“美国”}，
{名称：“约旦沃克”，国家：“澳大利亚”}；
var Profile=React.createClass({
render:function（）{
返回(
名称：{this.props.Name}
国家：{this.props.Country}

);
}
});
var UserProfiles=React.createClass({
render:function（）{
var allProfiles=this.props.profiles.map（函数（配置文件）{
返回(
);
});
返回(
{allProfiles}
);
}
});
React.render（，document.getElementById（“内容”）；
能否请您直接在浏览器中打开图像并共享网络调用标题作为响应？@AQadeerQureshi控制台中加载的图像。日志是这样的：这似乎不起作用。我可以为列表中的每个项目设置状态吗？真的可以吗？呜呜，我忘了调用
设置状态
。我刚刚添加了它。@vemund setState不会根据闭包规则，@vemund请按照下面的示例..将url设置为状态。我希望它能工作：）如果您仍然需要我的帮助。。我会写完整的解决方案。快乐编码。。。现在它工作了！谢谢然而，我能说的是，它的加载速度非常慢。这可能是因为