按钮 单击以使用对象数组在屏幕上显示 API 数据

Question

我试图通过单击按钮而不是在控制台上而是在屏幕本身上获取 API 数据结果。我可以在不使用按钮的情况下使用 UseEffect 来做到这一点.. 但我无法使用按钮来做到这一点。它在这段代码上给我的错误是这样的：

"TypeError: items.map is not a function"

当我尝试在 usestate 上使用简单的字符串（如 Usestate('')）然后执行我的代码时，它给了我这样的错误：

"Error: Objects are not valid as a React child (found: object with keys {results, info}).
If you meant to render a collection of children, use an array instead."

我什至不明白这个错误，因为我是新手。是因为我用的是axios吗？而不是 fetch.. 我怎样才能在屏幕上显示它？

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

function Things() {
const [items, setItems] = useState([])


function fetchRandomData() {
    axios.get('https://randomuser.me/api/').then(
        (response) => {
            setItems(response.data)
        }
    );
 }
 return (
    <div>
      <button onClick={fetchRandomData}>Fetch Random Data</button>
      <div>
      {items.map(item => (
      <li key={item.status}>{item.data.results}</li>
    ))};
      </div>
      
     
     




        
    </div>
    );
    };
   export default Things

Answer 1

在您当前的 Axios 请求和状态更新中，您将获得以下对象：

这是不可迭代的，这就是您收到该错误的原因。

为了让您的代码完美运行，我们必须更新状态

setItems(response.data.results);

这是Array（见上图），在这种情况下，您可以毫无问题地使用map 方法。

从项目中访问数据时要小心，并使用正确的键。

最终输出：

以下是如何正确列出渲染数据：

import React, { useState } from "react";
import axios from "axios";

function Things() {
  const [items, setItems] = useState([]);

  function fetchRandomData() {
    console.log("asodsb");
    axios
      .get("https://randomuser.me/api/")
      .then(response => {
        setItems(response.data.results);
        console.log(response.data.results);
      })
      .catch(error => console.log(error));
  }
  return (
    <div>
      <button onClick={fetchRandomData}>Fetch Random Data</button>
      <div>
        {items && items.map(item => (
          <>
            <img src={item.picture.thumbnail} />
            <p>First Name: {item.name.first}</p>
            <p>Last Name: {item.name.last}</p>
            <p>Phone: {item.cell}</p>
          </>
        ))}
      </div>
    </div>
  );
}
export default Things;

完整工作代码：Stackblitz