首页 > 解决方案 > React Fetch API 无法渲染图像

问题描述

我正在使用 Fetch API 从我构建的 API 返回数据。这是我的代码的样子:

import React, {useContext, useEffect, useState } from 'react'; 
import { useParams } from 'react-router-dom'; 
import FeedbackNav from './feedbacknav'; 
import UserContext from "../context/UserContext"; 
import Landing from './Landing'; 
import useFetch from './usefetch';

const ReviewInfo = () => {
    const { userData } = useContext(UserContext);
    const { id } = useParams();  
    const {data: review, error, isPending} = useFetch(`http://localhost:5000/reviews/reviews?_id=` + id);

    return (
        <div>
            {userData.user ? (
        <div>
            <div>
                {/* <FeedbackNav /> */}
            </div>
            <p className='testing12345'>This is a test {id} </p>
            { isPending && <div className='testing12345'>Loading...</div> }
            { error && <div>{ error }</div> }
            {review && (
                <div>
                    <img alt='soempty' src={review[0].userImage} className="dotdat"></img>
                    <p className='testing12345'>{review[0].firstName} {review[0].lastName}</p>
                    <p className='testing12345'>{review[0].city}</p>
                    <p className='testing12345'>{review[0].projectName}</p>
                    <p className='testing12345'>{review[0].review}</p>
                </div>
            )
            }
    </div>
    ) : (
        <div>
            <Landing /> 
        </div>
    )}
    </div>
    )
}

export default ReviewInfo; 

当我保存代码时,userImage 不会呈现给浏览器,而我尝试从 API 获取的其他数据会成功呈现(firstName、lastName、city、projectName、review)。我尝试了一些不同的东西,但我被卡住了。我可能做错了什么?

从开发工具: 来自开发工具的图像

感谢帮助!

标签: reactjsfetch

解决方案


推荐阅读