He estado tratando de imprimir una lista simple de db durante 2 días, aquí está el código ahora mismo:
function CategoriesTable() { const [isLoading, setLoading] = useState(true); let item_list = []; let print_list; useEffect(() =>{ Axios.get('http://localhost:3000/categories').then((response) => { const category_list = response.data.result; if(category_list) { for(let i = 0; i < category_list.length; i++){ item_list.push(category_list[i].category_name) } } print_list = function() { console.log(item_list.map((item) => <li>item</li>)) return item_list.map((item) => <li>item</li>) } setLoading(false); }) }, []) return ( <div> { !isLoading && print_list } </div> ) }Creo que la función debe ejecutarse después de que el estado de carga cambie a falso, ¿verdad? Por alguna razón, la función no se está ejecutando.
Por cierto, puedo imprimir la lista en la consola sin ningún problema, el problema es renderizar la lista.
Básicamente, reescriba desde cero ya que el código original es bastante desordenado, me temo.
Siéntase libre de preguntar en los comentarios si tiene alguna pregunta.
import { useState, useEffect } from "react"; import Axios from "axios"; /** * Why mix cases here? Are you gonna use camel or snake case? Choose one and only one. */ function CategoriesTable() { const [categoryNames, setCategoryNames] = useState([]); useEffect(() => { // not a good idea to use full URL on localhost Axios.get('/categories').then((response) => { const categoryList = response.data.result; if (categoryList) { const categoryNames = categoryList.map(({ category_name }) => category_name); console.log(categoryNames); // in case you want ot keep the console output setCategoryNames(categoryNames); } }); }, []); return ( <div> {/* You should either wrap <li> with either <ol> or <ul> */} <ol> {categoryNames.map(categoryName => ( // key is required and should be unique in map statement. In here I assume there are no duplicated categoryName <li key={categoryName}>{categoryNames}</li> ))} </ol> </div> ); }Sugeriría hacer algo como esto:
function CategoriesTable() { const [fetchedData, setFetchedData] = useState({ result: [], isLoading: true, }); useEffect(() =>{ Axios.get('http://localhost:3000/categories').then(response => { const category_list = response.data.result; setFetchedData({ isLoading: false, result: category_list.map(category => <li>{ category.category_name }</li>), }) }) }, []) return ( <div> { !fetchedData.isLoading && fetchedData.result } </div> ) }