Javascript 反应从慢速api获取img

我确信我的问题是显而易见的，但我在任何地方都找不到简单的答案。我不熟悉redux/flux，所以我不知道是否需要学习它们来实现我的目标。 我从我的服务器URL获取需要在组件上显示的图像。我想显示加载程序，直到获取图像。 最好（也是最简单）的方法是什么？是否需要使用flux/redux？ 我可以使用直接获取（图片地址）吗。。。答应我

现在，在呈现img html标记时只需调用url即可：

{this.props.data.images.map(img=>{
return(
  <img src={img.url}/>
)})

{this.props.data.images.map（img=>{
返回(
)})

---

如何管理此任务的异步？我已经使用apollo获取本地db数据。我可以使用apollo获取外部数据吗？

最简单的方法是定义一个加载标志，并使用它来确定是否应该呈现加载程序。看起来您的获取逻辑在其他地方，但想法是相同的

class YourComponent() extends Component {
    constructor() {
        this.state = {
            isLoading: false,
        };
    }

    componentWillMount() {
        this.setState({isLoading:true});
        fetch('image_URL')
        .then(res => {
            this.setState({
                images: res.images,
                isLoading: false,
            })
        })
    }

    render() {
        const { isLoading , images} = this.state;

        if (isLoading) {
            return <YourLoaderComponent />
        }

        return (
            <div>
                {images.map(img => <img src={img.url} />)}
            </div>
        );
    }
}

class YourComponent（）扩展组件{
构造函数（）{
此.state={
孤岛加载：false，
};
}
组件willmount（）{
this.setState（{isLoading:true}）；
获取（'image\u URL'）
。然后（res=>{
这是我的国家({
图像：res.images，
孤岛加载：false，
})
})
}
render（）{
const{isLoading，images}=this.state；
如果（孤岛加载）{
返回
}
返回(
{images.map（img=>）}
);
}
}

您可以使用

);
常量hiddenImageStyle={
宽度：0，
身高：0
};
类ImageComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：false
};
}
imageLoaded（）{
这是我的国家({
加载：正确
});
}
render（）{
if（this.state.loaded）{
返回(
)
}
返回(
this.imageLoaded（）}
样式={hiddenImageStyle}
/>
);
}
}
常数成像仪=[
"https://c1.staticflickr.com/5/4200/34055408873_e9bf494e24_k.jpg",
"https://c1.staticflickr.com/5/4536/37705199575_ded3cf76df_c.jpg"
];
类应用程序扩展了React.Component{
render（）{
返回(
{imagesUrls.map（（url，索引）=>(
))}
);
}
}
渲染(
如果你有很好的网速，你可能不会注意到微调器。要查看微调器，最好是在单独的选项卡中打开沙盒预览

然后打开chrome开发工具，在网络选项卡中选中禁用缓存，并将预设设置为慢速3G

刷新后，您将注意到加载微调器，直到图像加载为止

import React from "react";
import { render } from "react-dom";

const LoaderComponent = () => (
  <img
    width="300"
    height="300"
    alt="Loading spinner"
    src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif"
  />
);

const hiddenImageStyle = {
  width: 0,
  height: 0
};

class ImageComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false
    };
  }

  imageLoaded() {
    this.setState({
      loaded: true
    });
  }

  render() {
    if (this.state.loaded) {
      return(
        <div>
          <img alt="Cat" src={this.props.url} width="300" height="300" />
        </div>
      )
    }
    return (
      <div>
        <img
          alt="Cat"
          src={this.props.url}
          width="300"
          height="300"
          onLoad={() => this.imageLoaded()}
          style={hiddenImageStyle}
        />
        <LoaderComponent />
      </div>
    );
  }
}

const imagesUrls = [
  "https://c1.staticflickr.com/5/4200/34055408873_e9bf494e24_k.jpg",
  "https://c1.staticflickr.com/5/4536/37705199575_ded3cf76df_c.jpg"
];
class App extends React.Component {
  render() {
    return (
      <div>
        {imagesUrls.map((url, index) => (
          <ImageComponent key={index} url={url} />
        ))}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));