Question

我来自Angluar世界，其中变化检测比React更具侵略性。我对渲染组件异常接收图像URL的问题很突出。下面是sinppet：

    componentDidUpdate(){
        this.els = this.props.imagesUrls.map(url => {
            return (
                <img src={url}></img>
                )
        })
        console.log(this.els)
    }

    render(){
        return(
            <div className="image-list">
                IMAGE LIST
                {this.props.imagesUrls.map(el => <img src={el}></img>)} // Method 1
                {this.els} //Method 2
            </div>
        )
    }
}

方法1的作用就像魅力一样，方法2被延迟（即组件必须接收第二次道具才能呈现出好的道具网址。

我认为这是与异步相关的简单问题，但我会提供任何帮助和/或引导材料以帮助我避免成功。

Answer 1

在第二种方法中，有两件事导致延迟，

首先： componentDidUpdate在渲染后调用（第一次渲染时不调用），因此在渲染组件后执行调用

第二：您将返回的数据设置为不会导致重新渲染的类变量，导致重新渲染的任何其他更改只会导致显示数据。您必须改为使用setState。

但是，第一种方法是处理这种渲染的正确方法

反应渲染延迟

1 个答案: