Firebase 下載 URL 隨着 React.js 渲染（）中的變量消失

Question

在 html 的一部分中，我返回內部 React 渲染 function。 “故事”（在渲染之前從 state 檢索值）包含具有“url”等屬性的 js 對象。 單獨記錄整個 object 和其他屬性時，它們會出現在控制台上，但“url”屬性不會。 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. 但是在我進入渲染（）后消失了。 這是 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>

控制台中的Output如下：

因此，object 將“url”屬性顯示為 object 而不是字符串。 單獨訪問時，“url”未定義。 我不知道發生了什么事。 結果，我得到了圖像的另一個視圖。 提前致謝。

Answer 1

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很可能是從某個地方異步加載的，但我們不能根據您共享的代碼說這是在哪里。 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知道它需要更新那個 object 的 UI。