从 API 调用图像后不出现图像 - ReactJS Hook

Question

我无法显示通过调用 API 检索到的图像。在 Web 控制台中，它确实显示了我的图像字符串，但是，图像没有显示在我的 Web 应用程序中。出现一个带十字的小白框，而不是实际图像。我在 html 部分中调用图像错误吗？

代码：调用 API 检索图像

const [getText, setText] = useState([])
const [getImg, setImg] = useState([])

useEffect(() => {
    const url = "API link"

    const fetchData = async () => {
        try{
            const response = await fetch(url);
            const json = await response.json();
            console.log(json[0]["results");
            console.log(json[1]["image");
            setText(json.[0]["results"]);
            setImg(json.[1]["image"]);
        }catch (error) {
            console.log("error", error)
        }
    };
    fetchData();
}, []);

return (
       .
       .
       .
       <img src={getImg}></img>
)

Answer 1

好的，有一些拼写错误，或者您只是错误地没有抓住它们。我已经修复了它们并根据您共享的原始代码评论了更改。如果您能提供您的 img api 返回的内容会有所帮助，希望这对您有用。

const [getText, setText] = useState([])
const [getImg, setImg] = useState([])

useEffect(() => {
    const url = "API link"

    const fetchData = async () => {
        try{
            const response = await fetch(url);
            const json = await response.json();
            console.log(json[0]["results");
            console.log(json[1]["image");
            //getText(json.[0]["results"]; // Did you mean 'setText' instead? also closing ')' parenthesis missing
            setText(json.[0]["results"]);
            //getImg(json.[1]["image"]; // Did you mean 'setImg' instead? also closing ')' parenthesis missing again
            setImg(json.[1]["image"]);
        }catch (error) {
            console.log("error", error)
        }
    };
    fetchData();
}, []);

return (
       .
       .
       .
       <img src={getImg}></img>
) // Did you mean to use getImg in the return JSX, because setImg would make no sense since it is a function to set the image

useState() React 钩子返回 [value, updatingFunction] = useState(<initialValue>)。该值可以在 JSX 中使用，但如果您想更改该值，请使用更新功能，该功能开始重新渲染周期。