Question

我是ReactJS的新手并开始在其中开发应用程序。

该应用程序有一个包含100个图像URL的数组，我在网页上显示这些图像，每个图像上面都有一个删除按钮，点击该按钮可从数组中删除图像URL。

我可以开发应用程序。

我的问题是每当我删除图像时，应用程序再次进行网络调用以获取其他人的图像。例如，如果我删除了第5张图像，则会有网络调用来获取6到100的图像。有没有办法在图像已加载时停止进行这些网络调用。

我在AngularJS中开发了相同的应用程序并且它运行良好，当我删除图像时，没有网络调用来获取其他图像。

var Image= React.createClass({
	removeImage: function(){
		this.props.removeImage(this.props.index);
	},
	render: function(){
		var divStyle = {
			backgroundImage: 'url(' + this.props.imageUrl + ')'
		};
		return(
			<div className="imageWrapper">
                <div>Image {this.props.index+1}</div>
                <div className="image" style={divStyle}>
                    <button className="removeButton" onClick={this.removeImage} >Remove</button>
                </div>
            </div>
		)
	}
})
var Images= React.createClass({
	getInitialState: function() {
		console.log('Images: getInitialState');
	    return {data: imageUrls};
	},
	removeImage: function(index){
		console.log('Images: removeImage: index: ',index);
		this.state.data.splice(index,1);
		this.setState({data: this.state.data});
		console.log('end if removeImage method');
	},
	render: function(){
		console.log('in Images: render method: this :', this);
		var imagesNodes = this.state.data.map(function(imageUrl, index){
			return (
				<Image key={index} imageUrl={imageUrl} index={index} removeImage={this.removeImage}/>
			)
		},this);
		return(
			<div className="images">
				{imagesNodes}
			</div>
		)
	}
});

ReactDOM.render(
	<Images />,
	document.getElementById('imagesContainer')
)

Answer 1

您的密钥基于图像数组中的索引。

由于删除图像会更新以下图像的索引（以及React键），React会重新渲染所有图像。

如果您不想重新渲染它们，请尝试使用其他内容作为密钥（例如图片网址）

在此处查看更多内容：https://facebook.github.io/react/docs/reconciliation.html#keys

ReactJS和AnguarJS的表现

1 个答案: