React中嵌套Map渲染如何避免重复展示对应机型存储选项？

问题原因 #

你的array数组中存在重复的机型条目（比如"Galaxy S22"出现了两次），原代码直接遍历整个array，导致同一机型的存储选项被重复渲染。

修改方案 #

先对array进行去重处理，提取出唯一的机型列表，再基于这个列表渲染对应存储选项，就能避免重复展示。

修改后的代码 #

function generateAndDisplayRadioButtons(list, storages) {
  // 提取数组中唯一的机型名称，转为数组
  const uniqueModels = Array.from(new Set(list.map(item => item.name)));
  
  return (
    <div>
      {uniqueModels.map((modelName) => {
        return (
          <div key={modelName}>
            {/* 可选：添加机型名称标题，让UI结构更清晰 */}
            <h4>{modelName}</h4>
            {storages[modelName]?.map((storage) => {
              return (
                <div key={storage} className='flexCss'>
                  <input className="radioCss" type="radio" name={modelName} value={storage} />
                  <strong>{storage}</strong>
                </div>
              )
            })}
          </div>
        )
      })}
    </div>
  )
};

代码说明 #

1. 去重逻辑：通过list.map(item => item.name)提取所有机型名称，再用new Set()自动去重，最后用Array.from()转回数组，得到唯一的机型列表uniqueModels。
2. 渲染逻辑：遍历uniqueModels，每个机型只渲染一次对应的存储选项，彻底解决重复展示问题。

替代去重方式（可选） #

如果需要兼容不支持Set的环境，也可以用reduce实现去重：

const uniqueModels = list.reduce((acc, item) => {
  if (!acc.includes(item.name)) {
    acc.push(item.name);
  }
  return acc;
}, []);

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