Свойство отсутствует в интерфейсе при передаче родительскому

У меня проблема с отсутствующим свойством в моем компоненте приложения из моего интерфейса в моем дочернем компоненте.

Компонент туров:

import React, { useState } from 'react';

export interface ITourProps {
    id: string;
    name: string;
    info: string;
    image: string;
    price: string;
}

export const Tours = ({ id, name, info, image, price }: ITourProps) => {
    const [readMore, setReadMore] = useState<boolean>(false);

    return (
        <section className = "border-2" key = {id}>
            <article>
                <img src = {image} alt = {name} />
                <p>{name}</p>
                <p>{price}</p>
                <p>
                    {readMore ? info : `${info.substring(0, 200)}...`}
                    <button onClick = {() => setReadMore(!readMore)}>{readMore ? 'show less' : 'read more'}</button>
                </p>
            </article>
            <button>remove plz</button>
        </section>
    );
};

Когда я передаю компонент в родитель, он жалуется, что Property 'id' is missing in type '{ key: string; image: string; price: string; info: string; name: string; }' but required in type 'ITourProps'. В API одно из свойств — «id», эта ошибка говорит о том, что «id» не существует? Есть ли проблема с тем, как я являюсь ключом, или есть лучший вариант?

Вот компонент приложения:

import React, { useState, useEffect } from 'react';
import { Tours, ITourProps } from './components/Tours';
import axios from 'axios';

const url = 'https://course-api.com/react-tours-project';

function App() {
    const [loading, setLoading] = useState<boolean>(true);
    const [tours, setTours] = useState<ITourProps[]>([]);

    useEffect(() => {
        const fetchTours = async () => {
            const results = await axios(url);
            setTours(results.data);
            setLoading(false);
        };
        fetchTours();
    }, []);

    return (
            <main>
                <div>
                    <h2>Our Tours</h2>
                </div>
                {tours.map((tour) => (
                    <Tours key = {tour.id} image = {tour.image} price = {tour.price} info = {tour.info} name = {tour.name} />
                ))}
            </main>
    );
}

export default App;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
231
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы определили интерфейс IToursProp в соответствии с требованиями для свойства id. Однако когда вы визуализируете компонент Tours, вы не предоставляете id.

<Tours key = {tour.id} image = {tour.image} price = {tour.price} info = {tour.info} name = {tour.name} />

Вам нужно будет либо предоставить id to Tours, либо не делать это обязательным.

Другие вопросы по теме