web-dev-qa-db-fra.com

'chaîne' ne peut pas être utilisée pour indexer le type '{}'

J'ai le composant React qui génère un tableau HTML à partir d'un tableau d'objets. Les colonnes qui doivent être affichées sont définies via la propriété tableColumns.

Pour parcourir items et afficher les bonnes colonnes, je dois utiliser la propriété key de l'objet tableColumn ({item[column.key]}) mais TypeScript génère l'erreur suivante:

L'élément a implicitement un type 'any' car l'expression de type 'string' ne peut pas être utilisée pour indexer le type '{}'. Aucune signature d'index avec un paramètre de type 'chaîne' n'a été trouvée sur le type '{}'.

Que puis-je faire pour résoudre ce problème? je suis perdu

Comment j'appelle le composant:

<TableGridView
  items={[
    {
      id: 1,
      name: 'John Doe',
      email: '[email protected]'
    },
    {
      id: 2,
      name: 'Lorem ipsum',
      email: '[email protected]',
    }
  ]}
  tableColumns={[
    {
      key: 'id',
      label: 'ID',
    },
    {
      key: 'name',
      label: 'Name',
    }
  ]}
/>

Ma composante:

export type TableColumn = {
  key: string,
  label: string,
};

export type TableGridViewProps = {
  items: object[],
  tableColumns: TableColumn[]
};

const TableGridView: React.FC<TableGridViewProps> = ({ tableColumns, items }) => {
  return (
    <table>
      <tbody>
        {items.map(item => {
          return (
            <tr>
              {tableColumns.map((column, index) => {
                return (
                  <td
                    key={column.key}
                    className="lorem ipsum"
                  >
                    {item[column.key]} // error thrown here
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}
javascriptreactjstypescript
11
Max Tommy Mitschke
  items: object[],

C'est juste un mauvais type. Au lieu de cela, saisissez-le avec précision, par exemple:

 items: {
   [key: string]: number | string,
  }[]
8
Jonas Wilms

Essayer de changer:

  items={[
    {}
  ]}

À:

  items=[
    {}
  ]

Est-ce la sortie supposée?

1
John Doe
2
Lorem ipsum

J'obtiens cela.

1
Lucas Vazquez