代码之家 › 专栏 › 技术社区 › soccerway

如何从下面的迭代函数中删除多个显示的``NameName``(突出显示)

reactjs

soccerway · 技术社区 · 3 年前

如何删除的多个显示 nomineename (突出显示)从下面的迭代函数。

预期产出:

import React, { useRef, useEffect, useState } from "react";
import Axios from "axios";
import {Link} from "react-router-dom";
const moment = require('moment');

const NominationList = () => {
    const [nominationGroup, setNominationGroup] = useState({});
    const uniqueName = [];
    const isMounted = useRef(false);

    useEffect(() => {
        isMounted.current = true;
        return () => isMounted.current = false;
    }, []);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const res = await Axios.get('http://localhost:8000/service/nominationgroup');
                if (isMounted.current) {
                    setNominationGroup(res.data);
                    console.log("Nomination data from server :" + res.data);
                }
            } catch (e) {
                console.log(e);
            }
        }
        fetchData();
    }, []);

    return (
        <div className="App">
            <div className="leftNavItem">
                <a><Link to={'/dashboard'} className="nav-link"> <b>Dashboard</b> </Link></a>
            </div>
            <h1 className="header"><b>Nomination List</b></h1>
            <div className="wrap">
                <div id="sidebar-left">
                    <th>Nominee name</th>
                </div>
                <div id="main-content">
                    <th>Reason for Nomination</th>
                </div>
                <div id="sidebar-right">
                    <th>Date</th>
                </div>
            </div>

            {

                Object.keys(nominationGroup).map(nomineename  =>(
                <div className="wrap">
                            <div key={nominationGroup[nomineename].nomineename} id="sidebar-left">
                                {nominationGroup[nomineename].nomineename}
                            </div>
                            <div id="main-content">
                                <li key={nominationGroup[nomineename].description} className="nomlistdata">{nominationGroup[nomineename].description}</li>
                            </div>
                            <div key={nominationGroup[nomineename].createdAt} id="sidebar-right">
                                {moment(nominationGroup[nomineename].createdAt).format('DD-MMM-YYYY')}
                            </div>
                    <hr></hr>
                </div>
                ))}
        </div>
    )

}
export default NominationList;

1 回复 | 直到 3 年前

feverdreme 3 年前

不要让每个人都成为数组中的一个元素(可能有重复的名称),而是使用hashmap或object。

下面是一个使用对象的快速示例,但我建议在实际实现中使用hashmaps

const [nominationGroup, setNominationGroup] = useState({}); 

useEffect(() => {
    let newGroup = {};

    const fetchData = async () => {
        try {
            const res = await Axios.get('http://localhost:8000/service/nominationgroup');
            if (isMounted.current) {
                
                for (const elem of data){
                    if (!newGroup.hasOwnProperty(elem.nomineename)){
                        newGroup[elem.nomineename] = {
                            createdAt: "",
                            description: []
                        };
                    }
                    
                    newGroup[elem.nomineename].description.push(elem.description);
                    newGroup[elem.nomineename].createdAt = elem.createdAt;
                }

                setNominationGroup(newGroup);

                console.log("Nomination data from server :" + res.data);
            }
        } catch (e) {
            console.log(e);
        }
    }
    fetchData();
    }, []);

return (
    {
        Object.keys(nominationGroup).map(nomineename =>(
            <div className="wrap">
                    <div key={nomineename} id="sidebar-left">
                        {nomineename}
                    </div>

                    <div id="main-content">
                        {
                            nominationGroup[nomineename].description.map(desc => (
                                <li key={desc} className="nomlistdata">{desc}</li>
                            ))
                        }
                    </div>
                    <div key={nominationGroup[nomineename].createdAt} id="sidebar-right">
                        {moment(nominationGroup[nomineename].createdAt).format('DD-MMM-YYYY')}
                    </div>
                <hr></hr>
            </div>
        ))
    }
)

编辑:我添加了一个useEffect挂钩的示例,为每个人添加属性。因为这是一个对象,所以每个键只能有一个名称。

(添加的代码是匆忙编写的,只是连接了字符串。应该添加更多的调整,以适应数据的显示方式)