Javascript 如何避免在平面列表中多次呈现具有相同id的项？

我从api中得到了奇怪的数据

这些数据在下面列出

const dataArray = [
    { id: "PROD7", color: "green", weight: 2, price: 300 },
    { id: "PROD7", color: "red", weight: 2, price: 300 },
    { id: "PROD11", color: "cyan", weight: 4, price: 450 },
    { id: "PROD7", color: "yellow", weight: 2, price: 300 },
    { id: "PROD7", color: "blue", weight: 2, price: 300 },
];

如您所见，相同的

id

多次出现。这是产品列表api。 我有一份最爱的名单。哪个用户设置为fav

const myFavIds = ["PROD7"];

我现在正在做的是，我正在尝试将

myFavoriteList

组件呈现为 我正在从

dataArray

获取数据，并检查

dataArray

中是否包含

myFavIds

如果包含，我将呈现api。但问题是我得到了多个相同的id 因此，我希望避免两次或三次呈现相同的id…

我使用的是

flatList

来渲染组件。是否需要检查id，以及在以前的案例中是否有相同的id。避免它

下面是我如何呈现平面列表的

<FlatList
        data={dataArray}
        renderItem={renderItem}
        keyExtractor={(item, index) => String(index)}
/>

const renderItem = ({item, index}) => {
        if (favList.includes(item.id)) {
            return (
                <IndividualProduct
                    info={item}
                    index={index}
                    key={index}
                    fav={true}
                    stateChange={stateChange}
                    setLoading={setLoading}
                />
            );
        }
    };

字符串（索引）}
/>
常量renderItem=（{item，index}）=>{
if（工厂清单包括（项目id））{
返回(
);
}
};

理想情况下，API不应提供误导性数据。请与后端API开发人员联系以解决此问题

回到您的问题，您可以使用

uniqBy

函数来避免您的问题。例如，在你的情况下，打电话

var filteredArray = _.uniqBy(dataArray, 'id');

---

这将为您提供一个仅具有唯一id值的筛选数组。现在将此信息传递给您的平面列表，并完成余下的过程。

理想情况下，您的API不应提供误导您的数据。请与后端API开发人员联系以解决此问题

回到您的问题，您可以使用

uniqBy

函数来避免您的问题。例如，在你的情况下，打电话

var filteredArray = _.uniqBy(dataArray, 'id');

这将为您提供一个仅具有唯一id值的筛选数组。现在将此信息传递给您的平面列表，并完成其余过程。

任何“ID”都应该是不同且唯一的。查看数据，对于同一个ID有不同的值。如果您可以考虑丢失数据，那么可以对数组进行筛选，以只包含唯一的元素：

const数据数组=[
{id:“PROD7”，颜色：“绿色”，重量：2，价格：300}，
{id:“PROD7”，颜色：“红色”，重量：2，价格：300}，
{id:“PROD11”，颜色：“青色”，重量：4，价格：450}，
{id:“PROD7”，颜色：“黄色”，重量：2，价格：300}，
{id:“PROD7”，颜色：“蓝色”，重量：2，价格：300}，
];
const uniqueArray=dataArray.filter（（{id}，i，_arr）=>u arr.findIndex（（elem）=>elem.id==id==i）；
console.log（uniqueArray）任何“ID”都应该不同且唯一。查看数据，对于同一个ID有不同的值。如果您可以考虑丢失数据，那么可以对数组进行筛选，以只包含唯一的元素：


const数据数组=[
{id:“PROD7”，颜色：“绿色”，重量：2，价格：300}，
{id:“PROD7”，颜色：“红色”，重量：2，价格：300}，
{id:“PROD11”，颜色：“青色”，重量：4，价格：450}，
{id:“PROD7”，颜色：“黄色”，重量：2，价格：300}，
{id:“PROD7”，颜色：“蓝色”，重量：2，价格：300}，
];
const uniqueArray=dataArray.filter（（{id}，i，_arr）=>u arr.findIndex（（elem）=>elem.id==id==i）；
console.log（uniqueArray）