显示带有ReactJ中API路径的图像
2021-08-16
713
我从 API 获取数据,我想通过 API 提供给我的路径显示图片
我有这个简单的代码来获取一个随机演员, 并且我把他的所有信息保存为 json,例如以下数据: profile_path: "/j2Yahha9C0zN5DRaTDzYA7WtdOT.jpg"
我如何使用此路径通过
<img src="??”/>
function Game() {
const [page, setPage] = useState(1);
const [apiResponse, setApiResponse] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const API_KEY_MOVIE_DB = 'xxxxxxxxxxxxxxxxx';
useEffect(() => {
const myInit = {
method: "GET",
mode: "cors",
};
const random_0_20 = parseInt(Math.random() * (200 - 1) + 1);
const actor = fetch(`https://api.themoviedb.org/3/person/${random_0_20}?api_key=${API_KEY_MOVIE_DB}`, myInit)
.then(res => res.json())
.then(response => {
setApiResponse(JSON.stringify(response));
setIsLoading(false);
localStorage.setItem(`${random_0_20}`, JSON.stringify(response))
})
.catch(error => console.log(error));
}, [page]);
return (
<div>
{isLoading && <p>Loading</p>}
{apiResponse}
<img src={apiResponse.profile_path}></img>
</div>
);
} ```
显示图片
1个回答
您正在将状态设置为 字符串 :
setApiResponse(JSON.stringify(response))
并且字符串没有名为
profile_path
的属性:
<img src={apiResponse.profile_path}></img>
如果 API 的结果是一个对象,则只需将状态设置为该对象:
setApiResponse(response)
您还应该将状态初始化为对象,而不是数组:
const [apiResponse, setApiResponse] = useState({});
甚至可能将属性设置为默认值,以避免在标记中呈现“未定义”:
const [apiResponse, setApiResponse] = useState({ profile_path: '' });
字符串、对象和数组都是非常不同的东西。保持变量类型一致,以便代码的行为保持一致。
David
2021-08-16