如何在JSX外整洁地获取API数据并赋值给变量用于渲染？

有时候直接在JSX里写映射逻辑会显得杂乱，比如这样：

{randomUserData?.results.map((user: any) => (
   <>
    <div>{user.name.first} {user.name.last}</div>
    <img key={user.cell} src={user.picture.large} alt="" />
    <div>{user.location.city}</div>
  </>
 ))}

我想过一种更简洁的方式，把映射逻辑移出JSX：

const userFirstName = randomUserData?.results.map((user: any) => (<div>{user.name.first}</div>))

几种更整洁的处理方式： #

1. 提取独立组件（最推荐）

把用户卡片的渲染逻辑抽成单独组件，让主组件的JSX结构更简洁：

// 定义用户类型，避免使用any
type User = {
  name: { first: string; last: string };
  picture: { large: string };
  location: { city: string };
  cell: string;
};

// 独立的用户卡片组件
const UserCard = ({ user }: { user: User }) => (
  <div>
    <div>{user.name.first} {user.name.last}</div>
    <img src={user.picture.large} alt={`${user.name.first} ${user.name.last}`} />
    <div>{user.location.city}</div>
  </div>
);

// 主组件中使用
const App = () => {
  // 这里是获取randomUserData的逻辑，比如useEffect + fetch
  // const [randomUserData, setRandomUserData] = useState(null);

  return (
    <div className="user-list">
      {randomUserData?.results.map((user: User) => (
        <UserCard key={user.cell} user={user} />
      ))}
    </div>
  );
};

这种方式将渲染细节封装在子组件中，主组件只负责整体布局，可读性和可维护性都大幅提升。

2. 提前生成JSX元素集合

如果不想拆分组件，可以在渲染前提前生成好所有用户卡片的JSX元素，在JSX中直接引用变量：

const App = () => {
  // 获取randomUserData的逻辑...

  // 提前生成JSX元素，处理空值避免报错
  const userCards = randomUserData?.results.map((user: User) => (
    <div key={user.cell}>
      <div>{user.name.first} {user.name.last}</div>
      <img src={user.picture.large} alt={`${user.name.first} ${user.name.last}`} />
      <div>{user.location.city}</div>
    </div>
  )) || [];

  return <div className="user-list">{userCards}</div>;
};

注意必须给每个映射出的元素添加唯一key，同时用|| []处理randomUserData为空的情况，防止渲染报错。

3. 先预处理数据，再渲染

如果需要对API返回的数据做格式化、筛选等操作，可以先把数据处理成更适合渲染的结构，再映射成JSX：

const App = () => {
  // 获取randomUserData的逻辑...

  // 预处理数据，提取需要的字段并格式化
  const processedUsers = randomUserData?.results.map((user: User) => ({
    fullName: `${user.name.first} ${user.name.last}`,
    avatarUrl: user.picture.large,
    city: user.location.city,
    uniqueId: user.cell,
  })) || [];

  return (
    <div className="user-list">
      {processedUsers.map(user => (
        <div key={user.uniqueId}>
          <div>{user.fullName}</div>
          <img src={user.avatarUrl} alt={user.fullName} />
          <div>{user.city}</div>
        </div>
      ))}
    </div>
  );
};

这种方式将数据处理和渲染逻辑分离，代码逻辑更清晰，后续修改数据规则或渲染样式时也更方便。

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