如何在react中只显示同名的一个项目？

Question

在我的后端数据中，我有像这样的相同名称的扇区名称的列表，它有不同的id、每一项，但是有相同的扇区。所以我只想减少同样的行业名称

• 能源
• 能源
• 环境
• 政府
• 环境
• 航空航天与国防
• 航空航天与国防
• Manufacturing
• 零售
• Manufacturing

但我只想要一个像这样值相同的名字

• 能源
• 环境
• 政府
• 航空航天与国防
• Manufacturing
• 零售

这是我的密码

const Home = () => {
  const [assignData, setAssignData] = useState([]);

  const datalist = async () => {
    const result = await fetch("http://localhost:5000/api/getalldata");
    const dresult = await result.json();
    setAssignData(dresult);
    
  };
  
  useEffect(() => {
    datalist();
  }, []);

  return (
    <>
      {assignData.map((data) => {
        return (
          <>
          <h1> {data.sector} </h1>
         
          </>
        )
      })}
    </>
  );
};

export default Home;

Answer 1

如果您只需要获得唯一的sector属性，则可以将assignData数组映射到字符串数组，并通过Set将其推送到唯一值。

在这里，我使用了一个备注钩来创建sectors数组，并使其与assignedData保持同步。

const sectors = useMemo(
  () => [...new Set(assignData.map(({ sector }) => sector))],
  [assignData]
);

return sectors.map((sector) => <h1 key={sector}>{sector}</h1>);

Answer 2

您可以将assignData转换为Set并将其转换回数组。这将从数组中删除重复项。

{[... new Set(assignData)].map((data) => {
  return (
    <>
      <h1> {data.sector} </h1>
    </>
  )
})}