如何使用带有reactjs的single-spa渲染本地json答案

【问题标题】：How to render local json using single-spa with reactjs如何使用带有reactjs的single-spa渲染本地json
【发布时间】：2021-08-26 16:25:52
【问题描述】：

我正在尝试使用 Single-SPA（应用程序）和 ReacJS 从本地 json 文件制作地图，但是

这是调用json文件的ReactJS组件：

import menuJson from './menu.json';
    
const MenuItems = () => {
  const menu = menuJson.menu.map((data) => {
    return <li>{data.name}</li>;
  });
    
  return (
    <>
      <ul>{menu}</ul>
    </>
  );
};
    
export default MenuItems;

这是本地 JSON 文件

{
  "menu": [
    {
      "name": "Principal",
      "sub": [{ "name": "Sub menu", "url": "" }]
    }
  ]
}

这是应用程序在浏览器开发工具日志中显示的错误

我只使用 ReactJS 在一个清晰的应用程序中进行了测试，它运行良好。

【问题讨论】：

标签： javascript reactjs json single-spa

【解决方案1】：

我通过在 ReactJS 组件 jsx 文件的

标记处添加 key props 解决了这个问题，如下所示。

import menuJson from './menu.json';
    
const MenuItems = () => {
  const menu = menuJson.menu.map((data, index) => {
    return <li key={index}>{data.name}</li>;
  });
    
  return (
    <>
      <ul>{menu}</ul>
    </>
  );
};
    
export default MenuItems;

json 文件保持不变。

【讨论】：