一种方法是将这些数组映射到具有相同属性的对象，包括用于渲染的
我有两个这样的示例字符串。
const country = [{id:1, name:"Mexico"},
{id:2, name: "Canada"},
{id:3, name:"Italy"}];
const city = [{id:19, name: "Ottava",country:{id:2, name:"Canada"}},
{id:23, name:"Roma",country:{id:3, name: "Italy}];
然后我把这两个阵列结合起来
var newArray = country.concat(city);
稍后我使用这个阵列选择
<Select>
{newArray.map((i) => (
<Option value={i.country ? i.country.id : i.id}>
{i.name}
{i.country && ", " + i.country.name}
</Option>
))}
</Select>
我想按字母顺序(按国家名称(对选项进行排序。我尝试了很多方法。然而，我还没有找到一个可以在不破坏选项值的情况下使用的解决方案。
因此，我想要得到的输出如下。
<Option value={2}>Canada</Option>
<Option value={2}>Ottova, Canada</Option>
<Option value={3}>Italy</Option>
<Option value={3}>Roma, Italy</Option>
<Option value={1}>Mexico</Option>
如果您需要通过name属性执行此操作，只需在sort函数的回调中使用localCompare(…(，并为country和name添加必要的检查，如下所示：-
const country = [{id:1, name:"Mexico"},
{id:2, name: "Canada"},
{id:3, name:"Italy"}];
const city = [{id:19, name: "Ottava",country:{id:2, name:"Canada"}},
{id:23, name:"Roma",country:{id:3, name: "Italy"}}];
var newArray = country.concat(city);
function comparator(a,b){
let first = a.country?.name ?? a.name;
let second = b.country?.name ?? b.name;
return first.localeCompare(second);
}
console.log(newArray.sort(comparator));txt属性。
在cityOpts数组中进行名称/国家/地区的串联。
然后在渲染中，它们都将是相同的结构格式
const country=[{id:1,name:"Mexico"},{id:2,name:"Canada"},{id:3,name:"Italy"}],city=[{id:19,name:"Ottava",country:{id:2,name:"Canada"}},{id:23,name:"Roma",country:{id:3,name:"Italy"}}];
const countryOpts = country.map(({id, name})=> ({id, country: name, txt: name}))
const cityOpts = city.map(({id, name, country}) => ({id, country:country.name, txt: `${name}, ${country.name}`}))
const newArray = [...countryOpts,...cityOpts].sort((a,b) => a.country.localeCompare(b.country))
console.log(newArray)渲染将简化为
<Select>
{newArray.map((i) => <Option value={i.id}>{i.txt}</Option> )}
</Select>