es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo pasar un “parámetro” a un componente de react

13 Jul, 2023 Programación

Tengo una pregunta rápida, estoy intentando refactorizar mi código en una base de código existente, esta base de código utiliza una función de renderizado, sin embargo me gustaría reemplazarla con un componente funcional de React en su lugar.

Sin embargo, estoy obteniendo un error cuando paso un parámetro llamado “searchResults”, que es una lista.

Aquí está el código anterior no refactorizado.

searchResults.sort((a, b) => new Date(b[0].created) - new Date(a[0].created));

const Rows = [];

searchResults.forEach((appResults, i) => {
  Rows.push({
    cells: [
      appResults[0].applicationId,
      <>{renderSuccessCount(appResults)},
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  });
});

Este es mi código refactorizado.

const newRows = [];

searchResults.forEach((appResults, i) => {
  newRows.push({
    cells: [
      appResults[0].applicationId,
      <successcount>{appResults}={appResults}</successcount>,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  });
});

Esta es la función SuccessCount (en el código no refactorizado, renderSuccessCount simplemente se renombró a SuccessCount en la versión refactorizada).

const SuccessCount = (appResults: AppResult[]) => {
  const nSuccesses = appResults.filter((result: AppResult) => result.pulseStatus === SUCCESS).length;
  return Something;
};

Mi pregunta es relativamente simple, ¿cómo paso appResults a mi componente funcional? Mi código refactorizado actual me da este error.

TS2740: Type '{ children: any[]; }' is missing the following properties from type 'AppResult[]': length, pop, push, concat, and 26 more.

Esto está en el linter, ¿cómo me deshago de él?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar la lista searchResults al componente funcional SuccessCount, simplemente puedes pasarlo como una propiedad al renderizar el componente.

    Aquí está el código refactorizado actualizado:

    const newRows = [];

searchResults.forEach((appResults, i) => {
  newRows.push({
    cells: [
      appResults[0].applicationId,
      <successcount appresults="{appResults}"></successcount>,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  });
});

const SuccessCount = ({ appResults }: { appResults: AppResult[] }) => {
  const nSuccesses = appResults.filter((result: AppResult) => result.pulseStatus === SUCCESS).length;
  return Something;
};

    En el componente SuccessCount, defines una propiedad llamada appResults que se espera que sea un array de objetos de tipo AppResult. Luego, puedes acceder a esta propiedad dentro del componente utilizando la desestructuración en la firma de la función.

    Al renderizar el componente SuccessCount, puedes pasar la propiedad appResults como se muestra arriba. Esto resolverá el error TS2740 que estabas viendo en el linter.

Comments are closed.