时间戳

首页 > 解决方案 > 未处理的拒绝 (TypeError): {(intermediate value)}.filter 不是函数

javascript - 未处理的拒绝 (TypeError): {(intermediate value)}.filter 不是函数

问题描述

我正在使用 Reactjs 制作费用清单应用程序。

在此，有一小部分我创建了一个按钮，用于从列表中删除费用，该列表正在向服务器发出API调用，请求从数据库中删除该费用，也在前端。

但是这里的问题是，当函数filter()被调用时（见下文），它在点击删除按钮时在页面上显示，未处理的拒绝（TypeError）：{（中间值）}.filter不是函数...... （但费用从数据库中删除，刷新页面后也在前端过滤掉）。

代码 ：

 async remove(id){
      await fetch(`/api/expenses/${id}`, {              
        method : 'DELETE',
        headers : {
            'Accept' : 'application/json',
            'Content-Type' : 'application/json'
        }
      }).then(() => {
          let updatedExpenses = {...this.state.Expenses}.filter( i => i.id !== id);
          this.setState({Expenses : updatedExpenses});

      });
  }

我没有发现该filter() 方法有任何问题

为什么它显示Unhandled Rejection (TypeError): {(intermediate value)}.filter is not a function，每次都remove(id)被调用。

标签： javascriptreactjs

解决方案

您应该转换object为array第一个，然后在该数组上使用.filter() ；可能使用Object.entries()或Object.keys()或Object.values()；这是一个例子

let filteredValues = Object.values(this.state.Expenses).filter( i => i.id !== id);

编辑：问题比这更简单，可能是错字的结果；你没有任何这些你可以简单地做：

let updatedExpenses = this.state.Expenses.filter( i => i.id !== id)

顺便说一句，错误是错误地使用了扩展语法；你用对象而不是像这样的数组来包装它，[...this.state.Expenses]这将创建一个数组的副本Expenses；但它是多余的，因为.filter()将返回新数组。

推荐阅读