如何在 React 中获取和显示图像，在 Mongodb 中保存为 Cloudinary URL

Question

我刚开始使用 Cloudinary 在正在开发的应用程序中上传图片。它作为 url 链接存储在 MongoDB 数据库中。我已经成功上传了。我的数据库保存后是这样的：

id:5f90315331dc1727bc869afe
userEmail:"fletcher@gmail.com"
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 合作，如果有人能提供帮助，我将不胜感激！

Answer 1

在render() 内添加null 检查

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 之前执行，并在 prop 更改时重新渲染。