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>
  );
}

如何列出数据？

Answer 1

这是给你的代码 sn-p。

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>
    )
  }

Answer 2

试试这个方法，添加一个空的[] 作为第二个参数，以避免重复调用useEffect。在数组迭代中添加键也非常重要。也添加插值

检查这个。 {list.map((tdd)=><li key={tdd.id}>{tdd.title}</li>)}

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

export default function Hello() {

    const [list, setList] = useState([]);

    useEffect(()=>{
      axios.get("https://jsonplaceholder.typicode.com/todos")
      .then((todo)=> setList(todo.data));
    },[]) 
        return (
            <div>
                <ul>                    
                {list.map((tdd)=><li key={tdd.id}>{tdd.title}</li>)}              
                </ul>
            </div>
        )        
}

Answer 3

你能试试这个代码吗

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

export default function Listing() {
  const [list, setList] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos").then(todo => {
      console.log("todo: ", todo);
      setList(todo.data);
    });
  });

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