Firebase 下载 URL 随 React.js render() 中的变量一起消失

Question

在 html 的一部分中，我 return 在 React 渲染函数中。 “故事”（在渲染之前从状态中检索值）包含 js 对象，其属性包括“url”等。当单独记录整个对象和其他属性时，它们会出现在控制台上，但“url”属性不会。 url 包含图像的 firebase 下载 url，当我获取它以将其加载到状态时，它存在于渲染函数之外。但是在我进入 render() 之后就消失了。这是 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”在单独访问时未定义。我不知道发生了什么。结果我得到了图像的另一个视图。提前致谢。

Answer 1

由于 JSON.stringify 没有显示 url 这意味着 value/property 是在您最初记录对象后添加的，并且 Chrome 的控制台是只是用新的属性.

更新记录的对象

很可能 url 是从某处异步加载的，但我们无法根据您共享的代码确定它的加载位置。无论如何都没关系，因为无论发生在何处，解决方案都是相同的：当您在 stories 对象中的故事上设置 url 时，您还需要更新 stories 对象，以便 React 知道它需要更新该对象的 UI。

Firebase 下载 URL 随 React.js render() 中的变量一起消失

Firebase download URL disappears with variable inside React.js render()

javascript

render

firebase

reactjs

firebase-storage