Блог

Главная - Вопросы по программированию - Ошибка TS на карте: не существует при вводе в возврате реактивных крючков

Ошибка TS на карте: не существует при вводе в возврате реактивных крючков

#javascript #reactjs #typescript

#javascript #reactjs #typescript

Вопрос:

Не уверен, как исправить эту синтаксическую ошибку TS:

Interfaces.tsx:

 export interface Company {
  name: string;
}

FeaturedCompanies.tsx:

 import React, { useEffect, useState } from 'react';
import { Company } from '../Interfaces/Interfaces';

const FeaturedCompanies = () => {
    const [companies, setData] = useState({ companies: [] });
    const featuredCompanies: Array<Company> = [
        { name: 'Sony' },
        { name: 'Nike' },
        { name: 'Lowes' },
        { name: 'Home Depot' },
        { name: 'Adidas' },
    ];

    useEffect(() => {
        setData({ companies: featuredCompanies });
    }, []);

    return (
        <div>
            {companies.map((company) => <div data-testid="company">{company.name}</div>)}
        </div>
    );
};

export default FeaturedCompanies;

Ошибка: свойство ‘map’ не существует для типа ‘{ companies: any[]; }’

Комментарии:

1. Ваши компании — это объект с ключом companies , поэтому вы должны это сделать companies.companies.map ... .

Ответ №1:

Вы сохраняете в состоянии объект с компаниями, я считаю, что самым простым решением было бы заменить

 const [companies, setData] = useState({ companies: [] });

с

 const [companies, setData] = useState([]);

и измените useEffect на:

 setData(featuredCompanies);

Ответ №2:

Попробуйте приведенный ниже код :-

 import React, { useEffect, useState } from 'react';
import { Company } from '../Interfaces/Interfaces';

const FeaturedCompanies = () => {
    const [companies, setData] = useState<Company>([]);
    const featuredCompanies: Company[] = [
        { name: 'Sony' },
        { name: 'Nike' },
        { name: 'Lowes' },
        { name: 'Home Depot' },
        { name: 'Adidas' },
    ];

    useEffect(() => {
        setData(featuredCompanies);
    }, []);

    return (
        <div>
            {companies.map((company) => <div data-testid="company">{company.name}</div>)}
        </div>
    );
};

export default FeaturedCompanies;