Reactjs URL图像仅在调整浏览器大小时显示

我正在使用

React.js

和

firebase

。我正在从firebase获取一个图像，并尝试在组件中渲染它

当图像URL可用时，I

setState

URL，但图像仍不显示

componentDidMount(){
const that = this;
    firebase
      .storage()
      .ref("hero1.png")
      .getDownloadURL()
      .then(url => {
        console.log(url);
        that.setState({url})
      })
      .catch(error => {
        // Handle any errors
      });
}

//渲染图像

...
{ this.state.url &&
                this.state.slides.map((slide, index) => {
                  console.log(slide.imageUrl);   // url is being printed here
                  return (
                    <div
                      key={index}
                      onDragStart={this.handleOnDragStart}
                      className="slider-wrapper"
                    >
                      <div key={index} className="slider-content">
                          <img src={this.state.url} />   // when I set a hard-coded url, it works, but 
                                                         //does not work in state
                      </div>
                    </div>
                  );
                })}
...

。。。
{this.state.url&&
this.state.slides.map（（幻灯片，索引）=>{
console.log（slide.imageUrl）；//此处正在打印url
返回(
//当我设置一个硬编码的url时，它是有效的，但是
//不在状态下工作
);
})}
...

---

还有一件事，当我调整浏览器的大小时，图像会立即显示出来。不知道为什么

试试这个，我从子div中删除了键，并将另一个键更新为slide.imageUrl:

{ this.state.url &&
                this.state.slides.map((slide, index) => {
                  console.log(slide.imageUrl);   // url is being printed here
                  return (
                    <div
                      key={slide.imageUrl}
                      onDragStart={this.handleOnDragStart}
                      className="slider-wrapper"
                    >
                      <div className="slider-content">
                          <img src={this.state.url} />   // when I set a hard-coded url, it works, but 
                                                         //does not work in state
                      </div>
                    </div>
                  );
                })}

{this.state.url&&
this.state.slides.map（（幻灯片，索引）=>{
console.log（slide.imageUrl）；//此处正在打印url
返回(
//当我设置一个硬编码的url时，它是有效的，但是
//不在状态下工作
);
})}

我正在使用一个库（

react alice carousel

）来渲染图像幻灯片。这造成了问题。只需将库切换到react动画滑块，就可以了。

---

谢谢大家的帮助，谢谢你们的时间

我有另一个版本。试试这个，没有成功。我认为问题在于img src没有更新。因为url正在控制台中显示，我有另一个想法，根据keikai的评论，我没有更多的想法。您的错误表明url更改后不会重新呈现。但如果组件的状态发生更改，则应重新渲染。这就是我在第一次迭代中试图解决的问题。你是对的，但这是由于库（发布了答案）。谢谢你的帮助兄弟。使用索引作为键不是首选，你可以尝试使用索引+URL代替。