React映射项目数据到List组件渲染时显示undefined问题求助

遍历项目数据时未将单条数据的字段传递给ProjectList子组件，导致子组件接收的所有props均为undefined，最终渲染异常。

1. 修正Project组件的列表遍历逻辑 #

遍历projectdata时拿到每一条数据项，将对应字段传递给ProjectList，同时为列表项添加React要求的唯一key属性：

import "./Project.scss"
import ProjectList from "./ProjectList/ProjectList"
import { projectdata } from "./ProjectData.js"

export default function Project() {
    return (
        <div className='project' id='project'>
            <h1>Project</h1>
            <ul>
                {projectdata.map((item) => (
                    <ProjectList 
                      key={item.id}
                      name={item.name}
                      picture={item.picture}
                      description={item.description}
                      tech={item.tech}
                      url={item.url}
                      source={item.GitHub}
                    />
                ))}
            </ul>
        </div>
    )
}

如果想简化传值，可以直接使用对象展开语法，只要确保字段名匹配即可：

<ProjectList key={item.id} {...item} />

使用展开语法时需要同步修改ProjectList的入参名，将source改为和数据字段一致的GitHub。

2. 可选优化：移除冗余的模板字符串写法 #

你之前把变量包裹在${}里的写法属于冗余操作，直接使用变量即可，避免不必要的类型转换：

<h2>{name}</h2>
<span>{description}</span>
<img src={picture} alt={name} />

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