javascript - react JSX : href path inside an array of anchor tags is referencing the last path in a loop

Question

我正在尝试生成一个 anchor 标记数组，每个 anchor 标记都具有不同的 href 值。我遇到了一个问题，即每个 anchor 标记的路径原来与 for 循环末尾的路径相同。我应该如何修改我的代码，以使路径不都引用循环中路径的最后一个值？

这是我的代码:

  function generateLinks(){
    let path = '/';
    let links = [ <a href={ path }>root</a> ];
    for (let link = 0; link < 5; link++){
      const partial =  "folder"+ link;
      path += partial + '/'
      links.push(<a href={ path }>{ partial }</a>);
    }
   return links;
 }

目前这个输出:

[ <a href='/folder0/folder1/folder2/folder3/folder4/'>root</a> , <a href='/folder0/folder1/folder2/folder3/folder4/'>folder0</a> , <a href='/folder0/folder1/folder2/folder3/folder4/'>folder1</a> , <a href='/folder0/folder1/folder2/folder3/folder4/'>folder2</a> , <a href='/folder0/folder1/folder2/folder3/folder4/'>folder3</a> , <a href='/folder0/folder1/folder2/folder3/folder4/'>folder4</a> ]

我想要的输出是:

[ <a href='/'>root</a> , <a href='/folder0/'>folder0</a> , <a href='/folder0/folder1/'>folder1</a> , <a href='/folder0/folder1/folder2/'>folder2</a> , <a href='/folder0/folder1/folder2/folder3/'>folder3</a> , <a href='/folder0/folder1/folder2/folder3/folder4/'>folder4</a> ]

Answer 1

您发布的代码工作正常。您的真实代码必须不同。这是一个 jsfiddle，显示它具有正确的 href 值:https://jsfiddle.net/8d2xLc9L/

 function generateLinks(){
    let path = '/';
    let links = [ <a href={ path }>root</a> ];
    for (let link = 0; link < 5; link++){
      const partial =  "folder"+ link;
      path += partial + '/'
      links.push(<a href={ path }>{ partial }</a>);
    }
   return links;
 }

 document.getElementById("container").textContent = JSON.stringify(generateLinks(), null, 2);