时间戳

首页 > 解决方案 > React Typescript - 错误对象作为 React 子项无效

reactjs - React Typescript - 错误对象作为 React 子项无效

问题描述

我试图从随机用户 API 获取数据，但出现以下错误：

“对象作为 React 子级无效（找到：带有键 {title, first, last} 的对象）。如果您要渲染一组子级，请改用数组。”

到目前为止，这是我的代码：

import "./styles.css";
import React, { useState, useEffect } from "react";
import { User } from "../interfaces/users";
import axios, { AxiosResponse } from "axios";
export default function App() {
  const [randomUsers, setRandomUsers] = useState<User[]>([]);

  useEffect(() => {
    axios
      .get<User[]>("https://randomuser.me/api/?results=20")
      .then((response: AxiosResponse) => {
        setRandomUsers(response.data.results);
      });
  }, []);

  return (
    <div className="App">
      <h1>Names from random user API</h1>
      <ul>
        {randomUsers.map((user, key) => (
          <li key={key}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

我不明白为什么我不能映射randomUsers

这里是代码沙箱：

任何帮助将不胜感激

标签： reactjsapireact-hooksreact-typescript

解决方案

你正面临这个错误，因为名称是一个对象，所以试试这个

<li key={key}>{user.name.first}</li>

推荐阅读