反应动态图像答案

【问题标题】：React Dynamic Image反应动态图像
【发布时间】：2022-11-22 23:41:39
【问题描述】：

我对 React 有以下问题。

import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import RecipeService from "./RecipeService";
import RecipeProfileImg from "./RecipeProfileImg";
import "../../Assets/css/recipePage.css";

const RecipeComp = () => {

    const {id} = useParams();

    const [data, setData] = useState({});

    /*const [data, setData] = useState({
        name: 'name1',
        type: 'tipo1',
        url: 'path1',
        ingredients: 'ingr1',
        method: 'meth1',
        preparationTime: 10,
        cookingTime: 10
    });*/

    useEffect(() => {
        RecipeService.readRecipeById(id).then((res) => {
            console.log(res.data.type);
            setData(res.data);
        });
    }, [id]);

    function splitIngredients(ingrs){
        const pieces = ingrs.split(", ");
        const listItems = [];
        for(let i = 0; i < pieces.length; i++){
            const elem = <li>{pieces[i]}</li>;
            listItems.push(elem);
        }
        return listItems;
    }

    return(
        <div>
            <h1>{data.name}</h1>
            <RecipeProfileImg imgSrc={require("../../Assets/Images/" + data.type + "/" + data.url)} />
            <p id={data.url}>{data.type}</p>
            <p id={data.type}>{data.url}</p>
            <div className="listsBox">
                <label className="listLab">Ingredienti:
                    <ul className="listx">
                        {
                            splitIngredients(data.ingredients)
                        }
                    </ul>
                </label>
                <label className="listLab">Tempi:
                    <ul className="listx">
                        <li>Tempo di Preparazione: {data.preparationTime} min</li>
                        <li>Tempo di Cottura: {data.cookingTime} min</li>
                    </ul>
                </label>
            </div>
            <h3 className="prepTitle">Preparazione</h3>
            <p className="methodPar">{data.method}</p>
            <a href={'/recipes/delete/' + id}>delete me</a>
            <br />
            <a href={'/recipes/update/' + id}>update me</a>
        </div>
    );
}

export default RecipeComp;

在这个 React 组件中，我遇到了这个问题：文件正确读取了 2) 和 3) 行中的 data.url 和 data.type。为什么它不执行第 1 行）？

1) <RecipeProfileImg imgSrc={require("../../Assets/Images/" + data.type + "/" + data.url)} />
2)            <p id={data.url}>{data.type}</p>
3)            <p id={data.type}>{data.url}</p>

谢谢！

我也试过用反引号字符串传递这些值，../../Assets/Images/${data.type}/${data.url}，但结果是一样的：数据属性在除 img 标签之外的所有标签中都被正确读取。浏览器控制台中的错误是“找不到模块‘./undefined/undefined’”。路径 (../../Assets/Images/" + data.type + "/" + data.url) 是正确的。

【问题讨论】：

标签： javascript reactjs image frontend hook

【解决方案1】：

这是因为在第一次渲染后使用效果挂载状态，所以在第一次渲染中数据将是{}（即初始状态）

将您的返回语句包装在一个条件中 return ( {Object.keys(data).length>0 && ....rest of your code })

我希望它有帮助

【讨论】：