如何删除从api收回的数组中的重复项

我正在建立一个Blog应用程序，我试图获得结果，但它显示重复的结果，我试图从数组中删除重复的结果。

但问题是在数组内的每个dict中都有two key and values ，其中一个是唯一的，另一个可能是相同的，所以我试图根据相同的数组进行区分，它起作用了，但另一个key and value 对（这是唯一的）没有与另一个对连接起来。

从数据库返回的响应

[    {        "id": 2,        "name": "user_1"    },    {        "id": 3,        "name": "user_3"    },    {        "id": 4,        "name": "user_3"    }]

应用.js

function App() {
   const [blogs, setBlogs] = useState([]);

   axios.get("retract_blogs/").then((res) => {
   
      // Here I also want to attach "id"
      setBlogs({[...new Set(res.data.data.map(x => x.name))]})

   }

   return(
     <div>
       {
         blogs.map((user) =>
          <div>
             {user.name}

             // Here I wamt to show ID
             // {user.id}

          </div>
       }
     </div>
   )
}

我想把id 和x.username ，我也试过用

setBlogs({data:[...new Set(res.data.data.map(x => x.name, x.id))]})

但它显示

x没有被定义

但我想同时添加name 和id ，并根据名字而不是ID来删除重复的内容。

我已经试过很多次了，但还是不行。