更新 state 时 map 不是 function

Question

I have a bunch of links that I render on a page. I created a function that changes a specific prop from false to true depending if the link is active or not. This is triggered on click.

When I view the result of the new set of links I can see that the active prop has changed but the rendering stops working.

code:

The links:

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,
  },
];

inside of the render:

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 }));
  };

After the last line where I update the links the page turns red and I get:

TypeError: linksToRender.map is not a function

What am I doing wrong?

Answer 1

• When you call setlinksToRender(prevLinks => ({...prevLinks, ...newLinks })); on navLinkClicked , the state linksToRender becomes an object.

• Change setlinksToRender(prevLinks => ({...prevLinks, ...newLinks })); to setlinksToRender(prevLinks => ([...prevLinks, ...newLinks ]));

Answer 2

When you call you should just pass the new array to it:

setlinksToRender(newLinks);

Also please notice that if you do this:

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

You will be adding newLinks to the prevLinks which is probably not what you want.

Answer 3

You should understand one thing about spread operator ...

Spread operator just create a new copy of the existing memory item (array/object). So, here you should change

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

to

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

to create a new array, by combining the two arrays 'prevLinks' and 'newLinks'.