如何在React中获取和显示图像，并以Cloudinary URL的形式保存在Mongodb中

如何解决如何在React中获取和显示图像，并以Cloudinary URL的形式保存在Mongodb中

我刚刚开始使用Cloudinary在正在处理的应用程序中上传图片。它作为URL链接存储在MongoDB数据库中。我已经成功上传了。保存后，我的数据库如下所示：

id:5f90315331dc1727bc869afe
userEmail:"[e-mail]"
image:"https://res.cloudinary.com/myapp/image/upload/v1603285331/ifyo38crk..."
imageId:"ifyo38crkdniixeimme9"
__v:0

我的get（）端点看起来像这样：

app.get("/getAvatar/:email",(req,res) => {
  userEmail= req.params.email;
  Image.find({userEmail:userEmail},(err,images)=> {
    if (err) {
      res.status(500);
      res.send(err);
    } else {
      res.json(images);
    }
  });
});

和我的React前端：

class AllImages extends Component {
    componentDidMount(){
        const{user}=this.props.auth
        const email = user.email
        this.props.getAvatar(email)
    }
    render() {
        return this.props.resumeData.map(image=>{
            return(
                <div className="image-card-container">
                    <div key={image.id} className='image-card'>
                        <h4>{image.userEmail}</h4>
                        <img
                        className='main-image'
                        src={image.image}
                        alt='profile image'
                        />

                    </div>


                </div>
            )

Redux动作：

 export const getAvatar=(email)=>dispatch=>{
          
          dispatch(AvatarLoading());
          axios.post('/getAvatar/'+ email )
          .then(res=>
    dispatch({ 
      type:     GET_RESUME_AVATAR,payload: res.data
    
    })
    
    )
    history.push('/');
    };

在componentMount（）上出现错误：

TypeError: Cannot read property 'map' of undefined

我的代码肯定有问题。这是我第一次与Cloudinary合作，如果有人可以帮忙，我将不胜感激！

解决方法

在null内添加render()支票

class AllImages extends Component {
    componentDidMount(){
        const{user}=this.props.auth
        const email = user.email
        this.props.getAvatar(email)
    }
    render() {
        return (
           <div>
            {this.props.resumeData && this.props.resumeData.map(image=>{
              return(
                <div className="image-card-container">
                    <div key={image.id} className='image-card'>
                        <h4>{image.userEmail}</h4>
                        <img
                        className='main-image'
                        src={image.image}
                        alt='profile image'
                        />
                    </div>
                </div>
              )}
           </div>
        )
    }

render将在componentDidMount之前执行，并在更改道具时重新呈现。