0

Tenía el siguiente código que ayer funcionaba con el siguiente código (estoy usando React + TypeScript). Veamos la primera pieza de código, el componente padre:

 function GifExpertApp() {
  const [information, setInformation] = useState<string[]>(["Ronaldo"]);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Gif Expert App</h1>

        <AddCategory setInformation={setInformation} />
        <hr />

        <ol>
          {information.map((information) => {
            // return <GifGrid information={information} />;
            <h1>Hola</h1>;
          })}
        </ol>
      </header>
    </div>
  );
}

Veamos ahora el componente dónde tengo la barra de texto por dónde meto valores nuevos en el useState information.

    import React, { useState } from "react";
import { InformationProps } from "../interfaces";

function AddCategory({ setInformation }: InformationProps) {
  const [inputValue, setInputValue] = useState<string>("How I met your mother");

  const handleInputChange = (e: any) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e: any) => {
    e.preventDefault(); //It avoids the page to load again when the form is submitted

    if (inputValue.trim().length > 2) {
      //In order to avoid insert elements without text
      setInformation((information: string[]) => [...information, inputValue]);
      setInputValue(" "); //Cleaning the textbar
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleInputChange}
        className="textBar"
        value={inputValue}
      />
    </form>
  );
}

export default AddCategory;

Veamos ahora la interfaz:

// import { Dispatch, SetStateAction } from "react";

export interface InformationProps {
  // setInformation: Dispatch<SetStateAction<string[]>>;
  // information: string[];
  setInformation: (information: string[]) => void;
}

El problema es que me he puesto a hacer otro componente <GifGrid information={information} /> para hacer en dicho componente una llamada a una API de gifs y no sé si se ha liado Visual Studio Code o qué pero ya no funciona. Mis dudas son las siguientes:

  1. ¿Yo puedo tener una interfaz así? Porque mis problemas han empezado cuando he intentado usar los dos parámetros del useState en esta interfaz para reutilizar la misma interfaz que ya estaba utilizando pero con un nuevo componente:

    export interface InformationProps { information: string[]; setInformation: (information: string[]) => void; }

  2. ¿Cuando importo una interfaz en un componente, tengo que utilizar todos los componentes de la interfaz obligatoriamente o no es estrictamente necesario?

  3. El programa ahora mismo no me compila porque una línea del componente AddCategory, es decir, esta:

    setInformation((information: string[]) => [...information, inputValue]);

me da el siguiente error: Argument of type '(information: string[]) => string[]' is not assignable to parameter of type 'string[]'. y no comprendo por qué, ya que ayer esta misma línea con la misma información funcionaba. ¿Alguien sabe en qué estoy fallando? Gracias, saludos.

2 respuestas 2

1

La solución pasa por añadir la posibilidad de usar una arrow function dentro del setState que tienes en las interfaces:

    export interface InformationProps {
    // setInformation: Dispatch<SetStateAction<string[]>>;
    // information: string[];
    setInformation: (information: string[] | ((information:string[])=>string[]))  => void;
    }
5
  • Mil gracias. Ya me funciona pero no comprendo qué significa el código bien. Vamos por partes: a) information: string[]: que puede recibir un array de strings. Eso correcto. b) ((information:string[])=>string[])) => void;: ¿Que puede recibir un array de strings (podría ser el estado antes de setearlo), que a su vez llama a otro array de strings (podría ser el estado después de setearlo) y retorna void? No acabo de entenderlo bien. Muchas gracias :) Commented el 22 mar. 2021 a las 22:22
  • Piensa que en TypeScript tienes que tipar exactamente qué esperas que una función reciba y responda. Los setState usados en los Hooks de React no devuelven nada (puesto que setean su variable pero no la devuelven). En tu código quieres utilziar la funcionalidad especial que tienen los hooks de setear su variable haciendo uso de su valor anterior: setState( anterior => [...anterior, nuevo]), eso se lo tienes que indicar en la interfaz que defines. Por eso describes tu setInformation como una función que o bien tiene como parametros un string[] o bien la arrow function. Commented el 23 mar. 2021 a las 7:07
  • Vale, a ver si lo he entendido bien. Básicamente sería: a) information: string[]: que puede recibir un array de strings, que en este caso sería information (como si no seteara nada nuevo) b) ((information:string[])=>string[])) => void; information:string[] sería el estado anterior del array de strings y si seteo ya tengo el =>string[] con el estado nuevo y void porque no devuelve nada. ¿Lo he entendido bien? Gracias :) Commented el 23 mar. 2021 a las 16:41
  • 1
    Casi! Fíjate que el OR (el caracter | ) lo que indica es la entrada a la función que tu has llamado setInformation. Ese OR te dice que o bien le pasas como argumento a la función un array de strings (information) o bien le pasas un arrow function que tiene como parametro de entrada un array de strings y como salida un array de strings. El resultado siempre es void, porque el setInformation no devuelve nada. Commented el 23 mar. 2021 a las 22:06
  • Comprendido. Mil gracias Sergio :) Commented el 25 mar. 2021 a las 10:25
1
  1. Claro que puedes, ahora mismo tienes una interfaz que cuenta con una función. Esa función setInformation necesita un array de strings como parámetros y no devuelve nada.

  2. No es necesario, con declarar una propiedad como opcional ya deja de ser obligatoria. Te dejo un ejemplo aquí

  3. No te compila porque la función solo espera un array de strings, y le estás pasando la declaración de una función. Para que funcione deberías de usar esa función de esta forma:

    const foo = ["a", "b"];
setInformation(foo);
https://es.stackoverflow.com/posts/437447/edit#

2
  • ¿Con usar la información de esta forma te refieres a implementarlo de esa forma en las interfaces o cómo? Muchas gracias :) Commented el 22 mar. 2021 a las 22:22
  • 1
    Me refiero a que es la única forma en la que vas a poder usar la función setInformation() en ese componente, tal y como lo tienes declarado en la interfaz.
    – oscarblanq
    Commented el 23 mar. 2021 a las 8:32

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.