Блог

Прямо сейчас я получаю товар по адресу match.params.id но когда я использовал метод поиска для сравнения item.id и match.params.id это возвращает товар, который не найден…. ниже приведен код

 const DetailsPage = (props) => {
    console.log(props.match.params.id)
    const product = data.products.find((item) => item.id === props.match.params.id)
    console.log(product);
    if (!product) {
        return (
            <h1>Product Not Found</h1>
        )
    }
    return (
        <div>
            DetailsPage
                {product.name}
        </div>
    )
 

Как вы можете видеть, я console.log(props.match.params.id), который дал мне идентификатор параметра продукта, но в моем объявлении функции ничего не существует

Это связано с тем, что идентификатор, полученный из маршрута, будет иметь тип string . Поскольку вы выполняете === строгие равенства, найти не удастся .

Вы можете ввести свой params.id чтобы Number .

 const product = data.products.find((item) => item.id === Number(props.match.params.id))
 

Также react-router теперь предоставляется useParams крюк для извлечения параметров .

 let { id } = useParams();