ReactJs .map inside 地图我只得到一个是数组的最后一个孩子而不是整个

Question

通过将每个项目列表对象作为其 React 组件（名为 ProjectsItem）中的 prop 传递，然后将其映射到其<li>标签中的每个项目信息对象<ul>：

最后出错了

介绍.js 文件

项目列表（对象）：

 const [frontEndProjects, setFrontEndProjects] = useState([{

    projectInfos: [{ name: "Imobile Shop", href: "" }],

    projectInfos: [{ name: "Portfolio template", href: "" }],

    projectInfos: [{ name: "Responsive Design Practice", href: "" }],

  }]);

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

  const [backEndProjects, setBackEndProjects] = useState([{

    projectInfos: [{ name: "My Little Market", href: "" }],

    projectInfos: [{ name: "Todo List app", href: "" }],

  }]);

  const [webScrapingProjects, setWebScrapingProjects] = useState([{

    projectInfos: [{ name: "Business list", href: "" }],

    projectInfos: [{ name: "Weather Scraper", href: "" }],

    projectInfos: [{ name: "Amazon Price Tracker (done deployement soon)", href: "" }],

  }]);

  const [javaScriptProjects, setJavaScriptProjects] = useState([{

    projectInfos: [{ name: "Javascript: Blackjack - Rock Paper Scissors", href: "" }],

    projectInfos: [{ name: "Instagram clone ReactJs", href: "" }],

    projectInfos: [{ name: "Facebook Messenger clone ReactJs", href: "" }],

    projectInfos: [{ name: "Netflix clone ReactJs", href: "" }],

    projectInfos: [{ name: "Amazon clone ReactJs", href: "" }],

    projectInfos: [{ name: "Tinder clone ReactJs ( Under Dev )", href: "" }],

    projectInfos: [{ name: "Youtube clone ReactJs (LIVE DEMO soon)", href: "" }],

    projectInfos: [{ name: "Spotify clone ReactJs (LIVE DEMO soon)", href: "" }],

  }]);

  

  const [dataScienceProjects, setDataScienceProjects] = useState([{

    projectInfos: [{ name: "Process workbook-Edting Excel files", href: "" }],

  }]);

它总是只显示一个项目，或者当我像这样时它会引发错误

project.projectInfos.map 不是一个函数

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

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

project.map 不是一个函数

它也无法点火

projectInfo.map 不是函数

我试图通过给出一个简短的声明来总结，因为在我看来错误是在 Map() 中。

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

Answer 1

&nbsp; const [frontEndProjects, setFrontEndProjects] = useState([&nbsp; &nbsp; { name: "Imobile Shop", href: "" },&nbsp; &nbsp; { name: "Portfolio template", href: "" },&nbsp; &nbsp; { name: "Responsive Design Practice", href: "" },&nbsp; ]);&nbsp; const [machineLearningProjects, setMachineLearningProjects] = useState([&nbsp; &nbsp; { name: "Hazel AI", href: "" },&nbsp; ]);&nbsp; const [backEndProjects, setBackEndProjects] = useState([&nbsp; &nbsp; { name: "My Little Market", href: "" },&nbsp; &nbsp; { name: "Todo List app", href: "" },&nbsp; ]);&nbsp; const [webScrapingProjects, setWebScrapingProjects] = useState([&nbsp; &nbsp; { name: "Business list", href: "" },&nbsp; &nbsp; { name: "Weather Scraper", href: "" },&nbsp; &nbsp; { name: "Amazon Price Tracker (done deployement soon)", href: "" },&nbsp; ]);&nbsp; const [javaScriptProjects, setJavaScriptProjects] = useState([&nbsp; &nbsp; { name: "Javascript: Blackjack - Rock Paper Scissors", href: "" },&nbsp; &nbsp; { name: "Instagram clone ReactJs", href: "" },&nbsp; &nbsp; { name: "Facebook Messenger clone ReactJs", href: "" },&nbsp; &nbsp; { name: "Netflix clone ReactJs", href: "" },&nbsp; &nbsp; { name: "Amazon clone ReactJs", href: "" },&nbsp; &nbsp; { name: "Tinder clone ReactJs ( Under Dev )", href: "" },&nbsp; &nbsp; { name: "Youtube clone ReactJs (LIVE DEMO soon)", href: "" },&nbsp; &nbsp; { name: "Spotify clone ReactJs (LIVE DEMO soon)", href: "" },&nbsp; ]);&nbsp;&nbsp;&nbsp; const [dataScienceProjects, setDataScienceProjects] = useState([&nbsp; &nbsp; { name: "Process workbook-Edting Excel files", href: "" },&nbsp; ]);function ProjectsItem(props) {&nbsp; <div className="project-inner-container">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; {props.projects.map((project) =>&nbsp; &nbsp; &nbsp; &nbsp; (<li>{project.name}</li>))}&nbsp; &nbsp; </ul>&nbsp; </div>}这应该可以做到。我删除了projectInfos，因为这里不需要它，但如果您出于某种原因需要它，[&nbsp; { projectInfo: { name: "name1", href: "" } },&nbsp; { projectInfo: { name: "name2", href: "" } },]{props.projects.map((project) =>&nbsp; (<li>{project.projectInfo.name}</li>))}会做的。