如何修改JavaScript代码，让NFT生成时前缀同名文件夹仅随机选其一

问题背景 #

需求是生成NFT时，对名称前缀相同的文件夹（如Face Old和Face New），每次仅随机选择该前缀下的一个文件夹；不同前缀的文件夹（如Face和Hats）则各选一个，组合成当前NFT的图层集合。

用户之前的代码将文件夹选择逻辑放在startCreating函数外部，导致所有NFT都使用同一组选中的文件夹，无法实现每个NFT随机切换同前缀文件夹的需求。

错误原因 #

用户最初将selectedFolders的生成逻辑放在循环外，仅执行一次分组选择，后续所有NFT都复用这组文件夹，自然无法实现每个NFT的随机组合。

正确修改方案 #

1. 封装分组选择函数 #

将文件夹分组并随机选择的逻辑封装成独立函数，方便每次生成NFT时调用：

// 生成当前NFT要使用的图层文件夹集合
const getSelectedFolders = () => {
  // 按文件夹前缀分组
  const folderGroups = props.folderNames.reduce((grouped, folder) => {
    const prefix = folder.split(" ")[0];
    grouped[prefix] = grouped[prefix] || [];
    grouped[prefix].push(folder);
    return grouped;
  }, {});

  // 保持原前缀的出现顺序，避免图层叠加顺序混乱
  const uniquePrefixes = [...new Set(props.folderNames.map(f => f.split(" ")[0]))];
  
  // 为每个前缀组随机选一个文件夹
  return uniquePrefixes.map(prefix => {
    const group = folderGroups[prefix];
    const randomIdx = Math.floor(Math.random() * group.length);
    return group[randomIdx];
  });
};

2. 修改startCreating函数 #

在循环内部每次生成新NFT前，调用上述函数获取当前要使用的文件夹集合，确保每个NFT的图层组都是随机组合的：

const startCreating = async () => {
  props.setProgress(0);
  let editionCount = 1;
  let failedCount = 0;
  
  while (editionCount <= props.config.supply) {
    // 关键：每次生成NFT前重新选择文件夹
    const selectedFolders = getSelectedFolders();
    
    let newDna = createDna(selectedFolders);
    if (isDnaUnique(dnaList, newDna)) {
      let results = constructLayerToDna(newDna, selectedFolders);
      let loadedElements = [];

      results.forEach((layer) => {
        loadedElements.push(loadLayerImg(layer));
      });

      await Promise.all(loadedElements).then((renderObjectArray) => {
        ctx.clearRect(0, 0, props.config.width, props.config.height);
        renderObjectArray.forEach((renderObject, index) => {
          drawElement(renderObject, index);
        });

        saveImage(editionCount);
        addMetadata(newDna, editionCount);
        saveMetaDataSingleFile(editionCount);
        console.log(`Created edition: ${editionCount}`);
      });
      
      dnaList.add(filterDNAOptions(newDna));
      editionCount++;
      props.setProgress(editionCount - 1);
    } else {
      console.log("DNA exists!");
      failedCount++;
      if (failedCount >= 1000) {
        console.log(
          `You need more layers or elements to grow your edition to ${props.config.supply} artworks!`
        );
        process.exit();
      }
    }
  }
  
  writeMetaData(JSON.stringify(metadataList, null, 2));
};

说明 #

• 新增的getSelectedFolders函数会保持原文件夹的前缀顺序（比如原文件夹中Face前缀先出现，Hats后出现，选中的文件夹也会保持Face在前），避免图层叠加顺序出错。
• 将选择逻辑放到循环内部后，每个NFT生成时都会重新随机选择同前缀下的文件夹，实现需求中的组合效果（如第一个NFT用Face Old+Hats New，第二个用Face New+Hats Futuristic）。

内容的提问来源于stack exchange，提问作者Nima