map内的ReactJs .map我只有一个是数组的最后一个子而不是整个子

问题描述

通过将每个单独的projectsList对象作为道具传递给它的React组件（名为ProjectsItem），然后将其映射到<li>标签中的<ul>标签中的每个项目信息对象：

最终错误

Intro.js文件

项目列表（对象）：

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

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

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

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

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

和同一文件

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>
}

它总是只显示一个项目，或者在我喜欢时会触发错误

project.projectInfos.map不是函数

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

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

project.map不是函数

或

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

我也尝试过为名称添加第3个map函数，即使我认为第三个map函数可以解决该问题，但不知道如何使它像措辞一样：

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

也无法启动

projectInfo.map不是函数

我试图通过简要说明来进行总结，因为我认为该错误在Map（）中。

赞赏还提示有关代码和改进技巧

解决方法

Could not find a version that satisfies the requirement distro==1.3.0 (from azure-devops==0.18.0)
Found link ........... (requires-python:>=2.7,!=3.0.*,!=3.1.*,!=3.2.*),version: 2.7.0
...

这应该做到。我删除了projectInfos，因为这里不需要它，但是如果出于某种原因需要它，

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

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

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

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

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



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

会做到的。