通過將每個項目列表對象作為其 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() 中。欣賞有關代碼和改進技巧的提示