reactjs - react如何在功能组件中显示列表，列表数据是用axios获取的

Question

我正在尝试列出通过 axios 来自外部站点的数据。我的代码是

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

export default function Listing() {
  useEffect(() => {});

  const todo = axios
    .get("https://jsonplaceholder.typicode.com/todos")
    .then(todo => {
      todo.data.map(td => {
        //console.log(td.title);
      });
    });
  console.log(todo);

  return (
    <div>
      <ul>
        todo.data.map((tdd)=><li>{tdd.title}</li>);
      </ul>
    </div>
  );
}

如何列出数据？

标签： reactjsaxios

Answer 1

这是给你的代码片段。

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

export default function Listing() {
  const [data, setData] = useState([]);

  useEffect(() => {
     async getData(){
        const todo = await axios.get("https://jsonplaceholder.typicode.com/todos");
        setData(todo.data);
     }
   getData();
  },[])


  return ( <div >
    <ul >
       {data.map((tdd) => <li> {tdd.title}</li>)}
    <ul> 
    <div>
    )
  }