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

Question

我试图从随机用户 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

这里是代码sandbox:

任何帮助将不胜感激

Answer 1

你遇到这个错误是因为 names 是一个对象，所以试试这个

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

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

React Typescript - Error Objects are not valid as a React child

api

reactjs

react-hooks

react-typescript