Javascript 在react js中预览并上载同一组件中的两个单独图像

我已经添加了两个输入字段，以在同一组件中获取配置文件图像和封面照片。首先我上传并预览封面照片。此后我上传个人资料图像。上载此配置文件图像时，封面照片将再次渲染。由于我将预览这两幅图像，当一幅图像上传到另一幅图像时，这两幅图像会消失一段时间，然后一起加载。 我知道这是因为它在上传一幅图像时调用onChange方法时呈现了这两个元素。我如何避免这个消失的问题（上传一个图像时渲染两个元素）

这是代码

import React, { Component } from "react";
import "./UserProfile.css";
import img from "../../assets/img/3.jpg";

class ProfileImages extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      profileImage: null,
      coverImage: null,
      uploading: false
    };
  }

  handleOnChangeImage = event => {
    event.preventDefault();
    this.setState(
      {
        profileImage: event.target.files[0]
      },
      () => {
        console.log("wwwwww", this.state.profileImage);
      }
    );
  };

  handleOnChangeCoverImage = event => {
    event.preventDefault();
    this.setState({
      coverImage: event.target.files[0]
    });
  };

  render() {
      console.log("profileImage")
    return (
      <div className="animated fadeIn mt-4">
        <div
          className="card card-body responsive"
          style={{
            height: "300px",
            maxWidth: "100%",
            backgroundImage: `url(${
              this.state.coverImage != null
                ? URL.createObjectURL(this.state.coverImage)
                : "https://picsum.photos/id/863/200/200"
            })`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat"
          }}
        >
          <div className="row" style={{ height: "100%" }}>
            <div className="col-3 col-md-3">
              <div
                onClick={() => this.fileInput.click()}
                className="card card-body responsive profileImg"
                style={{
                  width: "100%",
                  height: "100%",
                  borderRadius: "100%",
                  backgroundImage: `url(${
                    this.state.profileImage != null
                      ? URL.createObjectURL(this.state.profileImage)
                      : img
                  })`,
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                  backgroundRepeat: "no-repeat"
                }}
              >
                <div className="middle">
                  <div className="text">
                    <i className="icon-camera" />
                  </div>
                </div>
              </div>
              <input
                name="profileImg"
                type="file"
                id="profileImg"
                onChange={this.handleOnChangeImage}
                style={{ display: "none" }}
                ref={fileInput => (this.fileInput = fileInput)}
              />
            </div>
            <div className="col-8" />

            {/* cover image */}
            <div className="button col-1">
              <label htmlFor="coverImg" className="float-right">
                <i className="fa fa-camera" style={{ fontSize: "30px" }} />
              </label>
              <input
                name="coverImg"
                type="file"
                id="coverImg"
                onChange={this.handleOnChangeCoverImage}
                style={{ display: "none" }}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default ProfileImages;

import React，{Component}来自“React”；
导入“/UserProfile.css”；
从“../../assets/img/3.jpg”导入img；
类ProfileImages扩展组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
profileImage:null，
封面图片：空，
上传：假
};
}
handleOnChangeImage=事件=>{
event.preventDefault（）；
这是我的国家(
{
profileImage:event.target.files[0]
},
() => {
log（“ww”，this.state.profileImage）；
}
);
};
handleOnChangeCoverImage=事件=>{
event.preventDefault（）；
这是我的国家({
封面图片：event.target.files[0]
});
};
render（）{
console.log（“profileImage”）
返回(
this.fileInput.click（）}
className=“卡体响应配置文件IMG”
风格={{
宽度：“100%”，
高度：“100%”，
边界半径：“100%”，
backgroundImage:`url(${
this.state.profileImage！=null
？URL.createObjectURL（this.state.profileImage）
：img
})`,
背景尺寸：“封面”，
背景位置：“中心”，
背景重复：“不重复”
}}
>
（this.fileInput=fileInput）}
/>
{/*封面图片*/}
);
}
}
导出默认配置文件图像；

来自MDN文档：

每次调用window.URL.createObjectURL（），都会创建一个唯一的对象URL，即使您已经为该文件创建了对象URL

这就是重复重新渲染的原因。已上载的图片URL每次都会更改，因此react会重新呈现它。
如果将创建的URL存储在状态而不是文件名中，则不会在每次其他图像更改时重新呈现：

handleOnChangeImage = event => {
  event.preventDefault();
  this.setState({
    profileImage: URL.createObjectURL(event.target.files[0])      

...

handleOnChangeCoverImage = event => {
  event.preventDefault();
  this.setState({
    coverImage: URL.createObjectURL(event.target.files[0])
  });
};