MERN项目中如何将数据库数字转换为对应数量的图片展示

核心需求 #

将数据库返回的stars字段数字（1-5），替换为对应数量的星星图片展示。

两种实现方案 #

方案1：利用现有数组切片

你已经定义了包含5个星星图片的stars数组，只需通过slice方法截取前quest.stars个元素即可：

修改questsFormatted中的星星展示部分：

let questsFormatted = quests.map((quest, i) => {
    return (
        <div key={i}>
            <p>{quest.description}</p>
            <div>
                {/* 替换原来的{quest.stars}为以下代码 */}
                {stars.slice(0, quest.stars)}
            </div>
            <p>{quest.timeframe}</p>
        </div>
    )
})

注意：原stars数组中所有图片使用了相同的id='str'，这违反HTML id唯一性规则，建议改为class：

const stars = [
    <img className='str' src={myImage} height={80} width={80} alt='star'/>, 
    <img className='str' src={myImage} height={80} width={80} alt='star'/>,
    <img className='str' src={myImage} height={80} width={80} alt='star'/>, 
    <img className='str' src={myImage} height={80} width={80} alt='star'/>,
    <img className='str' src={myImage} height={80} width={80} alt='star'/>
]

方案2：动态生成图片（更灵活）

无需预先定义stars数组，直接根据quest.stars的数值动态生成对应数量的图片，这种方式更适合数值范围可能变化的场景：

删除原stars数组，修改questsFormatted中的星星展示部分：

let questsFormatted = quests.map((quest, i) => {
    return (
        <div key={i}>
            <p>{quest.description}</p>
            <div>
                {Array.from({length: quest.stars}, (_, idx) => (
                    <img 
                        key={idx} 
                        className='str' 
                        src={myImage} 
                        height={80} 
                        width={80} 
                        alt='star'
                    />
                ))}
            </div>
            <p>{quest.timeframe}</p>
        </div>
    )
})

修改后的完整Homepage组件代码 #

import React from 'react';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import myImage from '../images/star-gif.gif'

function Homepage() {
    const navigate = useNavigate();
    const [quests, setQuests] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('http://localhost:3001/quests')
            const resData = await response.json()
            setQuests(resData)
        }
        fetchData()
    }, []);

    let questsFormatted = quests.map((quest, i) => {
        return (
            <div key={i}>
                <p>{quest.description}</p>
                <div>
                    {Array.from({length: quest.stars}, (_, idx) => (
                        <img 
                            key={idx} 
                            className='str' 
                            src={myImage} 
                            height={80} 
                            width={80} 
                            alt='star'
                        />
                    ))}
                </div>
                <p>{quest.timeframe}</p>
            </div>
        )
    })

    return (
        <div>
            <div className='header'>iRL</div>
            <div>
                <div>
                    <button className='sub-header-button' 
                     onClick={()=>{navigate('/quests')}}>
                         Quests
                    </button>
                </div>
            </div>
            <div>{questsFormatted}</div>
        </div> 
    )
}

export default Homepage

内容的提问来源于stack exchange，提问作者Adam