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

  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>

}

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

[

  { projectInfo: { name: "name1", href: "" } },

  { projectInfo: { name: "name2", href: "" } },

]

{props.projects.map((project) =>

  (<li>{project.projectInfo.name}</li>))}

会做的。