Question

我尝试从 Random user 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

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

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

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

1 个答案: