У меня проблема с отсутствующим свойством в моем компоненте приложения из моего интерфейса в моем дочернем компоненте.
Компонент туров:
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;
Вы определили интерфейс IToursProp
в соответствии с требованиями для свойства id
. Однако когда вы визуализируете компонент Tours
, вы не предоставляете id
.
<Tours key = {tour.id} image = {tour.image} price = {tour.price} info = {tour.info} name = {tour.name} />
Вам нужно будет либо предоставить id
to Tours
, либо не делать это обязательным.