如何在反应中映射到另一个地图内而不重复渲染

Question

我有数组中所有对象的列表

let array = [
  { name: "Galaxy S22", storage: "128GB" },
  { name: "Galaxy S22 5G", storage: "128GB" },
  { name: "Galaxy S22 Ultra", storage: "256GB" },
  { name: "Galaxy S22", storage: "256GB" }
 ];

我有另一个对象，它保存具有名称的对象及其存储

  const storages = {
    Galaxy S22: ["128GB", "256GB"],
    Galaxy S22 5G: ["128GB"],
    Galaxy S22 Ultra: ["256GB"]
   }

我试图在用户界面中显示相应品牌名称的相应存储。但我可以看到所有品牌的所有存储

function generateAndDisplayRadioButtons(list, storages) {
   return (
    <div>
        {
            list.map((item) => {
                return (
                    <div key={item.name}>
                        {storages[item.name]?.map((storage)=>{
                           return (
                                <div key={storage} className='flexCss'>
                                <input className="radioCss" type="radio" name={item.name} value={storage} />
                                <strong>{storage}</strong>
                            </div>
                            )
                        })

                        }
                    </div>
                )
            })
        }

    </div>
)
};

在渲染中我试图显示

<div>{generateAndDisplayRadioButtons(array, storages)}</div>

Answer 1

结构不匹配。 我认为你应该将你的功能更改为：

function generateAndDisplayRadioButtons(list, storages) {
return (
    <div>
        {list.map((item) => (
            <div key={item.name}>
                {storages[item.name]?.map((storage) => (
                    <div key={storage} className='flexCss'>
                        <input className="radioCss" type="radio" name={item.name} value={storage} />
                        <strong>{storage}</strong>
                    </div>
                ))}
            </div>
        ))}
    </div>
);

}