React -如何编写API映射器？

import React, { useEffect, useState } from 'react';
import axios from 'axios';

// 假设这是从API获取的数据结构
const apiResponse = {
  users: [
    {
      id: 1,
      name: 'John Doe',
      email: 'john.doe@example.com',
      details: {
        age: 30,
        address: '123 Main St'
      }
    },
    // 其他用户数据
  ]
};

// API映射器函数
const mapApiResponseToUserList = (apiResponse) => {
  return apiResponse.users.map(user => ({
    id: user.id,
    name: user.name,
    email: user.email,
    age: user.details.age
  }));
};

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/users');
        const mappedUsers = mapApiResponseToUserList(response.data);
        setUsers(mappedUsers);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email} - Age: {user.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;