Estoy creando una aplicación simple usando FARM (Fast API, React, MongoDB). Estaba siguiendo un tutorial en YT ( https://www.youtube.com/watch?v=OzUzrs8uJl8 ). He estado tratando de resolver este problema durante el último día, pero no tuve suerte, si alguien puede ayudar, sería muy apreciado, gracias.
Todo.js
import axios from "axios" import React from "react" function TodoItem(props) { const deleteTodoHandler = (title) => { axios.delete('http://localhost:8000/api/todo/${title}').then(res =>console.log(res.data))} return ( <div> <p> <span style={{ fontWeight: 'bold, underline'}}>{props.todo.title} : </span> {props.todo.description} <button onClick={() => deleteTodoHandler(props.todo.title)} className="btn btn-outline-danger my-2 mx-2" style= {{'borderRadius':'50px',}}>X</button> <hr></hr> </p> </div> ) } export default TodoItem;TodoListView.js
import TodoItem from "./Todo" function TodoView(props) { return ( <div> <ul> {props.todoList.map(todo => <TodoItem todo= {todo} />)} </ul> </div> ) } export default TodoViewps si es un error de sintaxis lo siento
El problema está aquí:
props.todoList aquí todoList proviene de una llamada axios y que es una llamada asíncrona y los datos no están disponibles en el primer procesamiento y está intentando acceder a algunos datos que no están disponibles, por eso el error.
Así que usa un renderizado condicional como:
{ ( props.todoList && props.todoList.length > 0 ) ? props.todoList.map(todo => <TodoItem todo={todo} />) : null }