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

Question

我正在尝试使用 Single-SPA (Application) 和 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文件中的<li>标记处添加关键道具解决了这个问题，就像这样。

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