Javascript React API JSON-隐藏重复值

我本来是想问这个问题的，但是我很困惑。我正在从Django后端服务器获取一些JSON格式的消息数据。我想在我的前端显示消息发送者的用户名，但所有消息都在一起。所以我不想显示重复的用户名

我的代码如下：

import React, {useState, useEffect} from 'react';
import PropTypes from 'prop-types';

function Messages(props) {
  
  const [messa, setMessa] = useState([]);


  useEffect(() => {
    fetch("http://127.0.0.1:8000/messages/messagesapi/",{
      method:'GET',
      headers: {
        'Content-Type':'application/json',
        'Authorization': `JWT ${localStorage.getItem('token')}`
      }
    })
    .then( res => res.json())
    .then( resp => setMessa(resp))
    .catch( error => console.log(error))
  }, [])




  return <div className="message-body">
  
  <ul className="LastMessages">
  { messa.filter((messa) => messa).map(mess => 
      
      {
         return <div>
<li>
    <b className="sender">{mess.sender}</b> 
    </li>
         </div>
       })}
   
  </ul>

  </div>
  
  ;
}

export default Messages;

user1, user1, user2, user1, user3, user2, user4, user5, user1

但我不想这样。我只是想：

user1, user2, user3, user4, user5

---

使用

Set

，它非常适合此用途。您将把它传递给您的发件人数组，它将忽略重复项：

看看这个：

const [senders, setSenders] = React.useState(null);

  React.useEffect(() => {
    const setOfSenders = new Set();
    messa.forEach((mess) => setOfSenders.add(mess.sender));
    setSenders(setOfSenders);
  }, [messa]);

  return (
    <div className="App">
      {senders && Array.from(senders).map((sender) => <p>{sender}</p>)}
    </div>
  );

const[senders，setSenders]=React.useState（null）；
React.useffect（（）=>{
const setOfSenders=新集合（）；
messa.forEach（（mess）=>setOfSenders.add（mess.sender））；
设置开关（设置开关）；
}，[messa]）；
返回(
{senders&&Array.from（senders）.map（（sender）=>{sender}
）}
);

从提取填充消息时，

useffect

运行并创建唯一发送者的集。然后在

返回中

从集合中创建一个数组，以像往常一样映射出值。这并没有涵盖所有用例，但这是一种方法

---

下面是一个工作示例：

Thx您的评论，但我对React非常陌生，所以我不知道如何使用此功能：（非常感谢。您是我的英雄xD！