更改从 React.js jsx 中的另一个组件加载的数组

Question

我正在尝试更改另一个 JSX 文件中的硬编码数组。第一个文件 routes.js。我尝试加载数组然后更改它。它只是直接从另一个文件更改加载的数据而不是数组。我如何从主要组件写入另一个 JSX 数组。

const routes = [
  {
    type: "collapse",
    name: "Our Mission",
    key: "dashboards",
    icon: <Shop size="12px" />,
    collapse: [
      {
        name: "Ways We can Help",
        key: "default",
        route: "/dashboards/default",
        component: Default,
      },
      {
        name: "How It Works",
        key: "automotive",
        route: "/dashboards/automotive",
        component: Automotive,
      },
      {
        name: "Who We Are",
        key: "smart-home",
        route: "/dashboards/smart-home",
        component: SmartHome,
      },
    ],
  },
  { type: "title", title: " ", key: "space1" },
  {
    type: "collapse",
    name: "Services",
    key: "services",
    icon: <Shop size="12px" />,
    href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
    component: Default,
    noCollapse: true,
  },
  {
    type: "collapse",
    name: "Products",
    key: "products",
    icon: <Shop size="12px" />,
    href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
    component: Default,
    noCollapse: true,
  },
];

export default routes;

主 jsx 文件中使用的代码。我希望能够写入远程数组以更改其值。

const handleSubmit = (event) => {
  event.preventDefault();

  // I want to push or filter with the code below
  {
    routes.length = 0;
   
    routes.map((route) => console.log({ route }));
  }
};

Answer 1

您不能更改数组本身，因为它是 const。您可以将其更改为 let，然后像这样导出它：

编辑

export let routes = [
  {
    type: "collapse",
    name: "Our Mission",
    key: "dashboards",
    icon: <Shop size="12px" />,
    collapse: [
      {
        name: "Ways We can Help",
        key: "default",
        route: "/dashboards/default",
        component: Default,
      },
      {
        name: "How It Works",
        key: "automotive",
        route: "/dashboards/automotive",
        component: Automotive,
      },
      {
        name: "Who We Are",
        key: "smart-home",
        route: "/dashboards/smart-home",
        component: SmartHome,
      },
    ],
  },
  { type: "title", title: " ", key: "space1" },
  {
    type: "collapse",
    name: "Services",
    key: "services",
    icon: <Shop size="12px" />,
    href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
    component: Default,
    noCollapse: true,
  },
  {
    type: "collapse",
    name: "Products",
    key: "products",
    icon: <Shop size="12px" />,
    href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
    component: Default,
    noCollapse: true,
  },
];

然后要在另一个 jsx 组件中使用它，您可以像这样导入它。

import {routes} from '../yourPathToIt/main'

更改从 React.js jsx 中的另一个组件加载的数组

Change an array loaded from another component in React.js jsx

arrays

jsx

node.js

reactjs