Firebase下载URL随React.js render()中的变量一起消失 [英] Firebase download URL disappears with variable inside React.js render()

问题描述

在html的一部分中，我返回了React render函数.故事"指的是故事".(其在渲染之前从状态中检索值)包含js对象，其属性包括"url"，"url"和别的.当分别记录整个对象和其他属性时，它们会出现在控制台上，但是"url"会显示在控制台上.属性没有.该URL包含图像的Firebase下载URL，当我获取它以将其加载到状态时，它存在于render函数之外.但是当我进入render()之后消失了.这是render()内部的代码段.

In a part of the html I return inside React render function. The "stories" (which retrieves values from state before render) contains js objects with attributes including "url" and others. When logging the entire object and other attributes individually, they appear on the console but the "url" attribute doesn't. The url contains the firebase download url for an image and it exists outside of the render function when I fetch it to load it into state. But disappears after I get into render(). This is a snippet inside of the render().

     <div className="Storysubmain">
        {stories.map((story, idx) => {
          console.log(story);
          console.log(JSON.stringify(story));
          console.log(story.url);
          return (
            <div className="story" key={idx}>
              {story.image != null ?
                <div className="storyimagebox">
                  <a rel='noopener noreferrer' target='_blank' href={story.link}>
                    <img src={story.url} alt='Related view' />
                  </a>
                </div>
                : ""
              }
              <div className="storydetails">
                {story.khronos == null ?
                  "" : (
                    <span className="storykhronos">{story.khronos}</span>
                  )
                }
                <span className="storytitle">{story.title}</span>
                <p>{story.text}</p>
              </div>
            </div>
          )
        })}
      </div>
    </div>

控制台中的输出如下:

因此，该对象显示了"url"属性作为对象而不是字符串."url"单独访问时未定义.我不知道这是怎么回事.结果，我得到了图像的替代视图.预先感谢.

So, the object shows the "url" attribute as an object but not as a string. "url" is undefined when accessed individually. I don't know what's going on. And as a result I get an alternate view of the image. Thanks in advance.

推荐答案

由于 JSON.stringify 不显示 url ，这意味着该值/属性为是在您最初记录对象后添加的，Chrome浏览器的控制台只是使用新属性更新了记录的对象.

Since the JSON.stringify doesn't show the url that means that that value/property is added after you initially log the object, and Chrome's console is just updating the logged object with the new property.

很可能 url 是从某个地方异步加载的，但是我们不能根据您共享的代码说这是哪里.没关系，因为解决方案无论发生在哪里都相同:在 stories 对象中的故事上设置 url 时，您还需要在应用程序状态下更新 stories 对象，以便React知道它需要更新该对象的UI.

Most likely the url is loaded asynchronously from somewhere, but we can't say where that is based on the code you shared. It doesn't matter anyway, as the solution is the same no matter where it happens: when you set the url on a story in the stories object, you also need to update the stories object in the state of your app, so that React know that it needs to update the UI for that object.

这篇关于Firebase下载URL随React.js render()中的变量一起消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！