3

Trabajando en React, tengo un componente al que le pasaba un método como prop, y que se llamaba cuando el usuario ejecutaba una acción. El código es el siguiente:

Nota: este código es simplificado de un fichero mucho más grande, es sólo para ilustrar el problema y puede contener errores causados al transcribir/modificar el código que no aparecen en el código completo que compila y funciona correctamente.

import React from 'react'

export default({
  nombres,
  cambioNombre,
}: {
  nombres: string[]
  cambioNombre: (args: { id: string; nombre: string }) => void
}) => (
    <div>
      {nombres.map(nombre => {
        const id = calculaId(nombre)
        const propsCompartidas = {
          key: id,
          onCambioNombre: (nuevoNombre: string) => cambioNombre(id, nuevoNombre)
        }
        return <OtroComponente {...propsCompartidas} />
      })}
    </div>
)

Ahora tengo que hacer que la función cambioNombre sea opcional, para ello simplemente añado un interrogante (?) detrás del nombre en la definición, tal que así:

cambioNombre?: (args: { id: string; nombre: string }) => void

Pero entonces el IDE me marca este error en la línea más abajo:

onCambioNombre: (nuevoNombre: string) => cambioNombre(id, nuevoNombre)

subrayando en rojo la llamada cambioNombre y mostrando el mensaje:

Cannot invoke an object which is possibly 'undefined'

Lo cual tiene sentido porque ahora cambioNombre puede que no se esté pasando como prop y sea undefined y el código falla al compilar... ¿Cómo puedo solucionar ese problema?

2
  • 1
    Perdón por mencionar una tonteria, pero por lo general se recomienda exportar componentes con nombre para que sea más fácil el poder debuguearlos. Te dejo el tweet de Dan Abramov que lo menciona :D
    – user22721
    el 14 feb. 2019 a las 23:58
  • @KacosPro No es una tontería y gracias por la recomendación y el enlace.
    – Alvaro Montoro
    el 15 feb. 2019 a las 0:11

1 respuesta 1

3

Puedes inspeccionar si la funcion es undefined. Al ser undefined, no invocas la funcion. Al no ser undefined, no invocas la funcion.

El codigo se veria un poco asi:

(nuevoNombre: string) => {
  if (cambioNombre !== undefined) { 
    return cambioNombre(id, nuevoNombre);
  }
}

Otra manera de escribir lo mismo y mantenerlo inline seria:

(nuevoNombre: string) => cambioNombre && cambioNombre(id, nuevoNombre)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.