Hola, estoy codificando aplicaciones de tareas sencillas con react.js/typescript. estoy atascado llamando repetidamente a todos
Podría llamar a todo en 1) y 3) pero NO PUEDO llamar a 2) .
cual es la diferencia. ¿Quizás mi tipo de interfaz falla en todo.type.tsx ?
<TodoListItem todo={todos[0]} />{todos.map(todo=> { <TodoListItem todo={todo} /> })}{todos.map(todo => (<li>{todo.text} - {todo.email2}</li> ))} o mi llamada Props2 en todo.tsx es mala?
React.FC<Props2> = ({ todo })
esto es mostrado
==== ( localhost:9000 rendering shows this ) ====== text1"[shown in TodoListItem]"contato@gabrielrufino.com text1 - contato@gabrielrufino.com text2 - darthvader@starwars.comsrc/páginas/index.tsx
import { TodoListItem } from '../components/todo'; export default function IndexPage(){ const [todos, setTods] = useState<Todo[]>([ { text: 'todo1', email2: 'contato@gabrielrufino.com' }, { text: "todo2", email2: 'darthvader@starwars.com' } ]) return ( <Layout> <TodoListItem todo={todos[0]} /> // ★I can call (★1) <ul> {todos.map(todo=> { <TodoListItem todo={todo} /> // ★I CANT call (★2) })} </ul> <ul> {todos.map(todo => ( <li>{todo.text} - {todo.email2}</li> // ★I can call (★3) ))} </ul> </Layout> ) }src/modelo/todo.type.tsx
interface Todo { text: string; email2: string; } interface Props2 { todo: Todo; }src/components/todo.tsx
import React, { FC } from 'react'; export const TodoListItem: React.FC<Props2> = ({ todo }) => { return ( <li> {todo.text} <br> "shown in TodoListItem" </br> {todo.email2} </li> ); };El problema era que no regresaba en absoluto.
Probar
<ul> {todos.map((todo: Todo) => ( <TodoListItem todo={todo} /> ))} </ul>o
<ul> {todos.map(todo=> { return <TodoListItem todo={todo} /> })} </ul>en vez de
<ul> {todos.map(todo=> { <TodoListItem todo={todo} /> // ★I CANT call (★2) })} </ul>Caja de arena de código => https://codesandbox.io/s/nervous-bartik-vl8hs
Ha cometido un error de horquillado . Para cualquier función en JS/TS, () significa regresar (ni siquiera tiene que usar la palabra clave return ), mientras que {} significa simplemente ejecutar la función
En su archivo index.tsx :
import { TodoListItem } from '../components/todo'; export default function IndexPage(){ const [todos, setTods] = useState<Todo[]>([ { text: 'todo1', email2: 'contato@gabrielrufino.com' }, { text: "todo2", email2: 'darthvader@starwars.com' } ]) return ( <Layout> <TodoListItem todo={todos[0]} /> // ★I can call (★1) //Here, inside the map function you have used "{}" instead of "()" so the map function is simply iterating and not returning anything. <ul> {todos.map(todo=> { <TodoListItem todo={todo} /> // ★I CANT call (★2) })} </ul> <ul> {todos.map(todo => ( <li>{todo.text} - {todo.email2}</li> // ★I can call (★3) ))} </ul> </Layout> ) }Las soluciones para esto podrían ser
<ul> {todos.map((todo: Todo) => ( <TodoListItem todo={todo} /> ))} </ul>o
<ul> {todos.map(todo=> { return <TodoListItem todo={todo} /> })} </ul>