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 以显示该产品的信息。

因此，如果您访问/product/1'，您会看到带有相应信息的This is Product 1 标题，如果您访问product/2，您会看到戴尔计算机。

在我的代码中，我试图保存数组的状态，因为我将添加一个允许某些用户更新此页面信息的表单。

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] });

        })          
    }

希望对你有帮助。