Javascript 更新状态时映射不是函数

我在页面上呈现了一堆链接。我创建了一个函数，根据链接是否处于活动状态，将特定道具从

false

更改为

true

。这是在单击时触发的

当我查看新链接集的结果时，我可以看到活动道具已更改，但渲染停止工作

代码：

链接：

const links: Array<LinkObj> = [
  {
    id: 1,
    text: 'A',
    icon: 'fa-chair',
    active: true,
    path: routePoints.A,
  },
  {
    id: 2,
    text: 'P',
    icon: 'fa-info-circle',
    active: false,
    path: routePoints.p,
  },

  {
    id: 3,
    text: 'H',
    icon: 'fa-h-square',
    active: false,
    path: routePoints.O,
  },
  {
    id: 4,
    text: 'U',
    icon: 'fa-h-square',
    active: false,
    path: routePoints.P,
  },

  {
    id: 5,
    text: 'UP',
    icon: 'fa-h-square',
    active: false,
    path: routePoints.PT,
  },
];

在我更新链接的最后一行之后，页面变为红色，我得到：

TypeError:linksToRender.map不是函数

我做错了什么？

• 当您调用

  setlinksToRender（prevLinks=>（{…prevLinks，…newLinks}）时

  在

  navlink上单击

  ，状态

  linksToRender

  成为一个对象

• 更改

  setlinksToRender（prevLinks=>（{…prevLinks，…newLinks}））到
  setlinksToRender（prevLinks=>（[…prevLinks，…newLinks]）
  

---

当您呼叫时，只需将新阵列传递给它：

setlinksToRender(newLinks);

另外，请注意，如果您这样做：

setlinksToRender(prevLinks => ([ ...prevLinks, ...newLinks ]));

---

您将向

prevLinks

添加

，这可能不是您想要的。

您应该了解有关spread operator

的一件事。

Spread运算符仅创建现有内存项（数组/对象）的新副本。 所以，你应该在这里换衣服

setlinksToRender(prevLinks => ({ ...prevLinks, ...newLinks }));

到

---

通过组合两个数组“prevLinks”和“newLinks”来创建新数组

linksToRender现在不是ArraySeems，在不同的场景中工作了一段时间，我需要考虑以前的状态。。thx用于此thx alot m8，此功能正常！接受其他答案，因为它是简单的，伟大的工作无论如何，谢谢！

setlinksToRender(prevLinks => ({ ...prevLinks, ...newLinks }));

setlinksToRender(prevLinks => ([ ...prevLinks, ...newLinks ]));