Typescript React - Проверьте, существует ли маршрутный путь в массиве

Question

Вот пример моего массива (я упростил массив, но для каждого элемента есть около 100 элементов и примерно 20 значений:

0:
odata.type: "SP.Data.ProductListItem"
Title: "This is Product 1"
Id: 1

1:
odata.type: "SP.Data.ProductListItem"
Title: "Dell Computer"
Id: 2

Путь URL-адреса mysite.com/product/2 Я создал компонент продукта который я хочу проверить, если и найти product/:id существует в массиве и соответствует URL, чтобы затем отобразить информацию об этом продукте. * title с информацией о ядре, и если вы наберете go to product/2, вы увидите Dell Computer.

В моем коде я пытаюсь сохранить состояние массива, потому что добавлю форму разрешив определенным пользователям обновлять информацию этой страницы.

pnp.sp.web.lists.getByTitle("Product") работает, у меня возникают проблемы при работе фильтра.

import * as React from 'react';
import { default as pnp, sp } from "sp-pnp-js";

export class Product extends React.Component<{ match: any }, {
  foundProduct: any,
}> {

  constructor(props) {
    super(props);
    this.state = {
      foundProduct: [],
    };
  }

  public componentDidMount() {
    const foundProduct = pnp.sp.web.lists.getByTitle("Product")
      .items
      .filter("Id eq '" + this.props.location.pathname, +"'")
      .top(1)
      .get()
      .then((items: any[]) => {
        this.setState({ foundProduct: [...foundProduct] });
      })
  }


  public render(): React.ReactElement<{}> {
    console.log(this);
    return (
      <div>
        <div className={styles.colHalf}>
          { this.state.foundProduct.ID }
        </div>
        <div className={styles.colHalf}>
          { this.state.foundProduct.Title}
        </div>
      </div>
    );
  }
}

Answer 1

Состояние внутри фильтра неясно, возможно, вам следует сделать что-то подобное:

(я не уверен в содержании this.props.location.pathname)

public componentDidMount() {

        const foundProduct = pnp.sp.web.lists.getByTitle("Product").items.filter(item=>item.Id==this.props.location.pathname).top(1).get().then((items: any[]) => {

            this.setState({ foundProduct: [...foundProduct] });

        })          
    }

Надеюсь помогает.