Question

我在页面上呈现了一堆链接。我创建了一个函数，该函数根据链接是否处于活动状态，将特定属性从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,
  },
];

渲染内部：

const [linksToRender, setlinksToRender] = useState(links);

 const navLinkClicked = (event: any, obj: LinkObj, path: string) => {
    event.preventDefault();
    const newLinks = linksToRender.map(link => {
      if (link.id === obj.id) link.active = true;
      else link.active = false;

      return link;
    });

    console.log('NEW L', newLinks);

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

在更新链接的最后一行之后，页面变为红色，然后显示：

TypeError：linksToRender.map不是函数

我在做什么错了？

Answer 1

在setlinksToRender(prevLinks => ({ ...prevLinks, ...newLinks }));上调用navLinkClicked时，状态linksToRender成为对象。
将setlinksToRender(prevLinks => ({ ...prevLinks, ...newLinks }));更改为setlinksToRender(prevLinks => ([ ...prevLinks, ...newLinks ]));

Answer 2

调用时，应将新数组传递给它：

setlinksToRender(newLinks);

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

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

您将添加 newLinks到prevLinks，这可能不是您想要的。

Answer 3

您应该了解有关传播算子p.price span:nth-child(n+2) {display:none;} p.price { visibility: hidden; } p.price > span > span { visibility: visible; }

的一件事

Spread运算符仅创建现有存储项（数组/对象）的新副本。所以，在这里您应该更改

<p class="price">
  <span class="wcpbc-price wcpbc-price-1357" data-product-id="1357">
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">CHF</span>
      120.95
    </span>
    " - "
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">CHF</span>
      152.95
    </span>
  </span>
</p>

到

...

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

更新状态时map不是功能

3 个答案: