Как внутри функции с generic запустить цикл в цикле на react?

Question

[Николай]

Я только учу typescript и поэтому прошу вас помочь разобраться в этом.

У меня есть компонент react

interface TableProps<T> {
    entities: Array<T> | null;
}

const Table = function <T>({
    entities,
}: TableProps<T>) {}

entities это массив из объектов и когда я пытаюсь

{entities?.map((entity, key) => {
{Object.entries(entity).map(([key, value], index) => {})
}

у меня ругается на entity "No overload matches this call"

Буду рад услышать советы и замечания!

Comments

[WbICHA]

Для начала тут бы стоило разобраться с жсом, потом с реактом и только после этого с тсом.

[Николай]

WbICHA, а что тут по вашему мнению не так?

Answer 1

[Дмитрий Беляев]

Нужно ограничить дженерик, иначе там может оказаться любой тип, а в Object.entries любой тип отдать нельзя.

interface TableProps<T extends Record<string, unknown>> {
    entities: T[] | null; // тут возможно еще стоит сделать это поле необязательным?
}

const Table = function <T extends Record<string, unknown>>({
    entities,
}: TableProps<T>) {
    // ...
    return (<>
        {entities?.map((entity, key) => {
            return Object.entries(entity).map(([key, value], index) => {
                // ...
            });
        })}
    </>);
}

Comments

[Николай]

я попробовал добавил, то что Вы написали, но это не исправило ошибку. Нашел решение в <T extends object>