reactjs - 图像仅在延迟 1 秒然后 setState 时呈现

Question

我在尝试异步加载图像并渲染它时遇到问题，我需要设置 100 毫秒的延迟来 setState 任何东西来渲染图像，但它只适用于少量图像，但对于更多图像，它需要超过 100 毫秒。任何人都有解决方案。非常感谢

this.props.callApi('GET', '/api/folders/' + child.id + '/files', null, this.props.token, (data) => {
                    console.log(data)
                    data.data.content.forEach(ele => {
                        fetch("/api/files/" + ele.id + "/blob")
                            .then((res) => res.blob())
                            .then((res) => {
                                childFolder.uploadFile.push(URL.createObjectURL(res));
                            });
                    })
                    arr.push(childFolder);
                    this.setState({uploadedLink: arr}, () => {
                        // this.setState(this.state)
                        // this.render();
                        // NEED TO SET DELAY TO IMAGE RENDERED
                        _.delay(() => this.setState({loading: false}), 100);
                    });

                })

标签： reactjsreduxreact-redux

Answer 1

使用onLoadimage 标签的 prop 来处理加载状态：

...
handleImgLoaded = () => {
   this.setState({ loading: false })
}

render(){
  const { uploadedLink } = this.state;

  return (
    <img src={uploadedLink} onLoad={this.handleImgLoaded} />
  )
)