如何使用 single-spa 和 reactjs 渲染本地 json

Question

我正在尝试使用 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": "" }]
    }
  ]
}

这是应用程序在浏览器 devtools 日志中显示的错误

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

Answer 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 文件保持不变。

如何使用 single-spa 和 reactjs 渲染本地 json

How to render local json using single-spa with reactjs

javascript

json

reactjs

single-spa