Question

按23行，我得到此属性“标题”在类型'faceProductList |中不存在。 faceProductList []'为什么会发生此类错误以解决它？

interface faceProductList {

  readonly title: string;
  readonly price: string;
  readonly prodState: string;
  readonly shipping: string;
  readonly sold: string;
  readonly src: string;
  readonly id: string;
  readonly to: string;
}

class Server {
    private url: string = 'https://foo0022.firebaseio.com/';
    public async request(id: string): Promise<(faceProductList[] | faceProductList)[]> {
        const res = await fetch(`${this.url}${id}`);
        const resArr: (faceProductList[] | faceProductList)[]  = await res.json();
        return resArr;
    }
    public async handler(id: string, valueSearch: string) { 
        await this.request(id)
        .then((array) => { 
            if(id){ 
              return  array.filter(({title}) => title.includes(valueSearch))
            }

            })
    }
}

Answer 1

您的请求将返回(faceProductList[] | faceProductList)[]，这意味着每个数组项都是faceProductList或faceProductList数组。错误告诉您，如果要过滤的项目是数组，则过滤器不起作用。

根据您的确切要求，可以在过滤之前将结果集展平：

return array
  .reduce((acc: faceProductList[], cur) => (Array.isArray(cur) ? acc.concat(cur) : acc.push(cur), acc), [])
  .filter(({ title }) => title.includes(valueSearch))

^{注意：您也可以使用内置的flat方法，但请参见this answer。}

或者您可以重写过滤条件以处理两种情况：

return array
  .filter((item) => Array.isArray(item)
    ? item.some(({ title }) => title.includes(valueSearch))
    : item.title.includes(valueSearch))

如果先将其展平并将其保存到单独的变量中，则可以更简洁地编写它：

const flatArray = array.reduce((acc: faceProductList[], cur) => (Array.isArray(cur) ? acc.concat(cur) : acc.push(cur), acc), []);
if (id) {
  return flatArray.filter(({ title }) => title.includes(valueSearch));
}

return flatArray;

Answer 2

好吧，确实如此-值(faceProductList[] | faceProductList)[]（在过滤器中展开时）可能是一个元素或元素数组没有明确的title属性。我建议确保request始终返回一个数组。测试firebase的返回值以查看它是否为单个元素（如果为单个元素），然后将其填充到数组中并取而代之。更改您的签名以符合期望。

属性“ title”在类型上不存在吗？

2 个答案: