Javascript map在我得到的map中只有一个是数组的最后一个子元素，而不是整个数组

通过将每个projectsList对象作为道具传递到它的React组件（名为ProjectsItem）中，然后将其映射到它的

标记中的每个project infos对象中，

：

最后的错误

Intro.js文件

项目列表（对象）：

和同一个文件

return (


            <ProjectsItem projects={frontEndProjects} />
            <ProjectsItem projects={machineLearningProjects} />
            <ProjectsItem projects={backEndProjects} />
            <ProjectsItem projects={webScrapingProjects} fadeOut />
            <ProjectsItem projects={javaScriptProjects} fadeOut />
            <ProjectsItem projects={dataScienceProjects} />

返回(

然后在另一个文件中作为道具导入

function ProjectsItem(props) {
     <div className="project-inner-container">
        <ul>
          {props.projects.map((project) =>
            project.projectInfos.map((projectInfo) => 
              <li>{projectInfo.projectInfos.name}</li>))}
        </ul>
      </div>
}

功能项目站点（道具）{

{props.projects.map（（项目）=>
project.projectInfo.map（（projectInfo）=>
{projectInfo.projectInfo.name}
）}

}

它总是只显示一个项目，或者当我想

project.ProjectInfo.map不是函数

当我试图通过更改.map位置来修复它时，如

project.map((infos) => <li>{infos.projectInfos.name})

project.map（（infos）=>
{infos.projectinfo.name}）

project.map不是一个函数

或

project.map（（infos）=>
{infos.name}）

我也尝试过为名称添加第三个映射函数，即使我认为第三个映射函数可能会修复它，但不知道如何使其与以下措辞类似：

<ul>
{props.projects.map((project) =>
project.projectInfos.map((projectInfo) => 
projectInfo.map((name) => 
<li>{name}</li>)))}
</ul>

{props.projects.map（（项目）=>
project.projectInfo.map（（projectInfo）=>
projectInfo.map（（名称）=>
{name}
）}

它也不可能开火

projectInfo.map不是函数

我试图通过简单的陈述来总结，因为我认为错误在Map（）中

还请欣赏有关代码和改进技巧的提示

const[frontEndProjects，setFrontEndProjects]=useState([
  const [frontEndProjects, setFrontEndProjects] = useState([
    { name: "Imobile Shop", href: "" },
    { name: "Portfolio template", href: "" },
    { name: "Responsive Design Practice", href: "" },
  ]);

  const [machineLearningProjects, setMachineLearningProjects] = useState([
    { name: "Hazel AI", href: "" },
  ]);

  const [backEndProjects, setBackEndProjects] = useState([
    { name: "My Little Market", href: "" },
    { name: "Todo List app", href: "" },
  ]);

  const [webScrapingProjects, setWebScrapingProjects] = useState([
    { name: "Business list", href: "" },
    { name: "Weather Scraper", href: "" },
    { name: "Amazon Price Tracker (done deployement soon)", href: "" },
  ]);

  const [javaScriptProjects, setJavaScriptProjects] = useState([
    { name: "Javascript: Blackjack - Rock Paper Scissors", href: "" },
    { name: "Instagram clone ReactJs", href: "" },
    { name: "Facebook Messenger clone ReactJs", href: "" },
    { name: "Netflix clone ReactJs", href: "" },
    { name: "Amazon clone ReactJs", href: "" },
    { name: "Tinder clone ReactJs ( Under Dev )", href: "" },
    { name: "Youtube clone ReactJs (LIVE DEMO soon)", href: "" },
    { name: "Spotify clone ReactJs (LIVE DEMO soon)", href: "" },
  ]);
  
  const [dataScienceProjects, setDataScienceProjects] = useState([
    { name: "Process workbook-Edting Excel files", href: "" },
  ]);



function ProjectsItem(props) {
  <div className="project-inner-container">
    <ul>
      {props.projects.map((project) =>
        (<li>{project.name}</li>))}
    </ul>
  </div>
}

{名称：“Imobile商店”，href:“}，
{name:“公文包模板”，href:“}，
{name:“响应性设计实践”，href:“}，
]);
const[machineLearningProjects，setMachineLearningProjects]=useState([
{名称：“榛子爱”，href:“}，
]);
const[backEndProjects，setBackEndProjects]=useState([
{name:“我的小市场”，href:}，
{name:“待办事项列表应用程序”，href:“}，
]);
const[webScrapingProjects，setWebScrapingProjects]=useState([
{name:“业务列表”，href:“}，
{name:“天气刮刀”，href:}，
{name:“亚马逊价格跟踪器（即将完成部署）”，href:“}，
]);
const[javaScriptProjects，setJavaScriptProjects]=useState([
{name:“Javascript:Blackjack-石头剪纸”，href:“}，
{name:“Instagram克隆”，href:“}，
{name:“Facebook Messenger”，href:“}，
{name:“Netflix克隆反应器”，href:“}，
{name:“Amazon clone ReactJs”，href:“}，
{name:“Tinder clone ReactJs（在Dev下）”，href:“}，
{name:“Youtube clone ReactJs（很快将进行现场演示）”，href:“}，
{name:“Spotify clone ReactJs（很快将进行实况演示）”，href:“}，
]);
const[dataScienceProjects，setDataScienceProjects]=useState([
{name:“处理工作簿Edting Excel文件”，href:“}，
]);
功能项目站点（道具）{

{props.projects.map（（项目）=>
（
{project.name}
）}

}

这应该可以。我删除了ProjectInfo，因为这里不需要它，但如果您出于某种原因需要它

[
  { projectInfo: { name: "name1", href: "" } },
  { projectInfo: { name: "name2", href: "" } },
]

{props.projects.map((project) =>
  (<li>{project.projectInfo.name}</li>))}

[
{projectInfo:{name:“name1”，href:“}，
{projectInfo:{name:“name2”，href:“}，
]
{props.projects.map（（项目）=>
（
{project.projectInfo.name}
）}

---

可以。

删除li标记中的projectInfo。

{projectInfo.name}

也许我可以为名称添加第三个映射函数，如

{projectInfo.projectInfo.map（（name）=>
name
）}

即使在您当前的模型中，props.projects也是一个数组，因此您需要一个映射。对于每个项目，它都有另一个数组projectInfo，因此您需要在此处使用另一个映射。对于每个projectInfo，您没有任何数组。从您的模型来看，您真的需要projectInfo数组吗？所有这些数组都有一个项。您可以更改projectInfos到一个名为projectInfo的对象中，然后您可以删除一个映射，只为您的程序留下一个映射。是的，实际上它有两个项“name”和“href”但是为了简单起见，为了有一个更可读的代码，因此为什么它们是空的，顺便说一下，在我的代码中它们也是空的，因为我正在尝试缩小问题的范围，消除所有的破坏，集中精力解决这个问题你救了我的命。

  const [frontEndProjects, setFrontEndProjects] = useState([
    { name: "Imobile Shop", href: "" },
    { name: "Portfolio template", href: "" },
    { name: "Responsive Design Practice", href: "" },
  ]);

  const [machineLearningProjects, setMachineLearningProjects] = useState([
    { name: "Hazel AI", href: "" },
  ]);

  const [backEndProjects, setBackEndProjects] = useState([
    { name: "My Little Market", href: "" },
    { name: "Todo List app", href: "" },
  ]);

  const [webScrapingProjects, setWebScrapingProjects] = useState([
    { name: "Business list", href: "" },
    { name: "Weather Scraper", href: "" },
    { name: "Amazon Price Tracker (done deployement soon)", href: "" },
  ]);

  const [javaScriptProjects, setJavaScriptProjects] = useState([
    { name: "Javascript: Blackjack - Rock Paper Scissors", href: "" },
    { name: "Instagram clone ReactJs", href: "" },
    { name: "Facebook Messenger clone ReactJs", href: "" },
    { name: "Netflix clone ReactJs", href: "" },
    { name: "Amazon clone ReactJs", href: "" },
    { name: "Tinder clone ReactJs ( Under Dev )", href: "" },
    { name: "Youtube clone ReactJs (LIVE DEMO soon)", href: "" },
    { name: "Spotify clone ReactJs (LIVE DEMO soon)", href: "" },
  ]);
  
  const [dataScienceProjects, setDataScienceProjects] = useState([
    { name: "Process workbook-Edting Excel files", href: "" },
  ]);



function ProjectsItem(props) {
  <div className="project-inner-container">
    <ul>
      {props.projects.map((project) =>
        (<li>{project.name}</li>))}
    </ul>
  </div>
}

[
  { projectInfo: { name: "name1", href: "" } },
  { projectInfo: { name: "name2", href: "" } },
]

{props.projects.map((project) =>
  (<li>{project.projectInfo.name}</li>))}