基于文本获取图像并从 API react 显示

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;

在 Noah 建议的更改后，我只能显示一张图片。

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 3次，参数为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

祝你好运，希望它有效。