React中列表/数组的遍历解析问题求助

问题描述 #

本人拥有Java开发背景，刚接触JavaScript与React，目前遇到数组遍历展示的问题。已从后端获取包含10个用户对象的数组，希望在前端解析并展示其值，但不清楚正确语法。尝试过一些方法但不确定方向，附上相关代码及后端返回数据示例，恳请指点。

原代码片段 #

//define variable we want data in
const [top10Users=[], setTop10Users] = useState();

useEffect(() => {
    const getUsers = async () => {
        try {
            //getting array of top 10 Users (after await)
            const userRank = await userService.getTop10UserPoints();
            console.log(userRank);
            //setting Array of top 10 users
            setTop10Users(userRank);
        } catch (err) {
            console.error(err);
        }
    };
    getUsers();
}, []);

const listOfPaticipants = [
//for the sake of space I did not put all 10 participants here, just one, but the full code has this block 10x
    {
        "Name": {top10Users.map(top10Users => <div>{top10Users[0].firstName +" "+top10Users[0].lastName}</div>)},
        "Country": 'U.S.',
        "Points": '38,450',
        "Created": "Jan 2020"
    }
]

后端返回数据示例（console.log(userRank)输出） #

0: {firstName: 'Molly', lastName: 'Ferrari', country: 'Canada', occupation: 'STUDENT', …}
1: {firstName: 'Quandale', lastName: 'Dingle', country: 'Canada', occupation: 'STUDENT', …}
2: {firstName: 'Bulbasaur', lastName: 'User', country: 'Croatia (Hrvatska)', occupation: 'ENGINEERING', …}
3: {firstName: 'Ivysaur', lastName: 'User', country: 'American Samoa', occupation: 'UNEMPLOYED', …}
4: {firstName: 'Venusaur', lastName: 'User', country: 'Eritrea', occupation: 'SOFTWARE', …}
5: {firstName: 'Charmander', lastName: 'User', country: 'France Metropolitan', occupation: 'RELIGIOUS', …}
6: {firstName: 'Charmeleon', lastName: 'User', country: 'Bahrain', occupation: 'SOFTWARE', …}
7: {firstName: 'Charizard', lastName: 'User', country: 'Liechtenstein', occupation: 'RELIGIOUS', …}
8: {firstName: 'Squirtle', lastName: 'User', country: 'Mozambique', occupation: 'PSYCHOLOGY', …}
9: {firstName: 'Wartortle', lastName: 'User', country: 'Palau', occupation: 'MEDCINE', …}

错误分析 #

1. useState初始化不规范：虽然const [top10Users=[], setTop10Users] = useState();能运行，但React规范是将初始值直接传入useState参数，即useState([])。
2. map遍历逻辑错误：原代码中map的参数名与数组名重复（都叫top10Users），且每次固定取数组第一个元素top10Users[0]，完全没遍历所有用户。
3. 冗余手动构建数组：不需要手动创建10个对象的listOfPaticipants，直接遍历后端返回的数组生成展示结构即可。

修正后的代码方案 #

方案一：直接在渲染逻辑中遍历数组（推荐） #

function TopUsersList() {
    // 规范初始化useState，传入空数组作为初始值
    const [top10Users, setTop10Users] = useState([]);
    
    useEffect(() => {
        const getUsers = async () => {
            try {
                const userRank = await userService.getTop10UserPoints();
                setTop10Users(userRank);
            } catch (err) {
                console.error(err);
            }
        };
        getUsers();
    }, []);

    return (
        <div className="user-list">
            {/* 遍历top10Users，每个元素对应一个用户 */}
            {top10Users.map((user, index) => (
                {/* 优先用用户唯一ID当key，无ID时用索引 */}
                <div key={index} className="user-card">
                    <p><strong>姓名:</strong> {user.firstName} {user.lastName}</p>
                    <p><strong>国家:</strong> {user.country}</p>
                    {/* 格式化积分数字为千分位，根据后端实际字段调整 */}
                    <p><strong>积分:</strong> {user.points?.toLocaleString()}</p>
                    {/* 格式化创建时间为"Jan 2020"样式，根据后端实际字段调整 */}
                    <p><strong>创建时间:</strong> {new Date(user.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}</p>
                </div>
            ))}
        </div>
    );
}

方案二：先构建格式化数组再遍历（适合复用格式化数据的场景） #

如果需要将用户数据格式化成指定结构后复用，可以先处理数组再渲染：

function TopUsersList() {
    const [top10Users, setTop10Users] = useState([]);
    
    useEffect(() => {
        const getUsers = async () => {
            try {
                const userRank = await userService.getTop10UserPoints();
                setTop10Users(userRank);
            } catch (err) {
                console.error(err);
            }
        };
        getUsers();
    }, []);

    // 格式化用户数据为需要的结构
    const listOfParticipants = top10Users.map(user => ({
        Name: `${user.firstName} ${user.lastName}`,
        Country: user.country,
        Points: user.points?.toLocaleString(),
        Created: new Date(user.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
    }));

    return (
        <div className="user-list">
            {listOfParticipants.map((participant, index) => (
                <div key={index} className="user-card">
                    <p><strong>姓名:</strong> {participant.Name}</p>
                    <p><strong>国家:</strong> {participant.Country}</p>
                    <p><strong>积分:</strong> {participant.Points}</p>
                    <p><strong>创建时间:</strong> {participant.Created}</p>
                </div>
            ))}
        </div>
    );
}

关键注意点 #

• map参数命名：避免回调参数名与数组名重复，防止变量覆盖。
• key属性：React要求列表元素必须有唯一key，优先使用用户的唯一标识（如user.id），无唯一ID时可用索引。
• 异步数据处理：数据是异步获取的，初始状态top10Users为空数组，React会自动在数据更新后重新渲染。

内容的提问来源于stack exchange，提问作者abdcg