根据文本获取图像并从 API 反应显示

Question

我已经使用API检索了一个类别列表。现在我想根据类别从 URL 获取图像。我尝试使用每个类别从另一个 API 获取图像，但我不确定该怎么做。

import React, { useEffect, useState } from 'react';
import './css/Category.css';
function Category() {
useEffect(() => {
fetchData();
getImage();
}, []);
const [categories, setCategories] = useState([]);
const [image, setImage] = useState('');
const fetchData = async () => {
const data = await fetch('https://opentdb.com/api_category.php')
const categories = await data.json();
console.log(categories.trivia_categories)
setCategories(categories.trivia_categories)
}
const getImage = async (name) => {
console.log(name)
const q = name.split(' ').join('+')
const img = await fetch(`https://pixabay.com/api/?key=apikey&q=${q}&image_type=photo`)
const image = await img.json();
console.log(image)
setImage(image.previewURL)
}
return (
<div className="categories">
Yesss
<div className="category-grid">
{categories.map(category => (
<div className="category">
{category.name}
<img src={getImage(category.name)} /> //do not know what to do here to fetch image of the respective category 
</div>
))}
</div>

</div>
)
}
export default Category;

在诺亚建议的更改之后，我只能显示一张图像。

const getImage = async (name) => {
const query = stringMan(name.name)
console.log(query)
const img = await fetch(`https://pixabay.com/api/?key=17160673-fd37d255ded620179ba954ce0&q=${query}&image_type=photo`)
const image = await img.json();
console.log(image)
setImage({ [name.name]: image.hits[0].largeImageURL })
}
return (
<div className="categories">
Yesss
<div className="category-grid">
{categories.map(category => (
<div className="category" key={category.id}>
{category.name}
<img key={category.id} src={image[category.name]} />
</div>
))}
</div>
</div>
)

Answer 1

您可以在此处进行一些更改。

我看到的一个问题是，你有一个image变量，它被重用于每个类别。因此，当您映射类别列表时(例如，假设我们有类别：[history、science和math](。当前代码将调用 getImage 三次，history、science和math作为参数。

但是，只有一个状态变量正在写入。这意味着setImage的最后一次执行是唯一将被保留的执行。

因此，您可能希望将image从类别图像的 URL 更改为具有以下形状的对象：

{
history: [url],
science: [url],
math: [url]
}

要进行的另一个更改是直接在呈现的输出<img src={getImage(category.name)} />中调用getImage()函数。相反，这应该只使用分配给映像状态的值：<img src={image} />。

要实际获取图像，您可以使用useEffect钩 (https://reactjs.org/docs/hooks-effect.html( 对类别变量的更改做出反应。这可能看起来像这样：

useEffect(() => {
categories.forEach((c) => getImage(c));
}, [categories]);

每当依赖项更改时，useEffect钩子将调用它给出的函数。这将允许您触发getImage函数以响应对类别的更改。

Answer 2

正如上面/下面的 @noah-callaway 所述，可以做很多改进，但直接来说，你需要简单地修复 URI 创建逻辑以使用如下所示encodeURIComponent：

import React, { useEffect, useState } from 'react';
function Category() {
useEffect(() => {
fetchData();
getImage();
}, []);
const [categories, setCategories] = useState([]);
const [image, setImage] = useState('');
const fetchData = async () => {
const data = await fetch('https://opentdb.com/api_category.php')
const categories = await data.json();
console.log(categories.trivia_categories)
setCategories(categories.trivia_categories)
}
const getImage = async (name) => {
return encodeURI(`https://pixabay.com/api/?key=apikey&q=${encodeURIComponent(name)}&image_type=photo`)
}
return (
<div className="categories">
Yesss
<div className="category-grid">
{categories.map(category => (
<div className="category">
{category.name}
<img src={getImage(category.name)} />
</div>
))}
</div>

</div>
)
}

没有 API 密钥，所以无法测试，但它会给你类似的东西

https://pixabay.com/api/?key=apikey&q=Entertainment%3A%20Comics&image_type=photo

祝你好运，希望它有效。