Javascript ReactJS setState变量未定义

我正在尝试筛选数组，并使用该数组的筛选版本设置其状态。我的代码如下所示：

    class Overview extends Component {
      constructor() {
        super();

        this.state = {
          card: []
        }
      }

      deleteItem(id) {
        fetch('/api/v1/story/'+id,{
          method: 'DELETE',
        })
        .then(response => response.json())
        .then(response => {
          if(response['response'] == "success"){
            this.setState({
              //this is where it says this.state is undefined
              card: this.state.card.filter(s => s.storyId !== id)
            });
          }else{
            toastr.warning('dit item is al verwijderd', '', {positionClass: "toast-bottom-right", timeOut: 40000})
          }
        })
      }

      componentDidMount() {
        fetch('/api/v1/overview')
          .then((response) => response.json())
          .then((responseJson) => {
            this.setState({ 
              card: responseJson
            })
          })
      }
      render(){return (    
       <div className="deleteItem" onClick={deleteItem}>
       </div>
      )}

类概述扩展组件{
构造函数（）{
超级（）；
此.state={
卡片：[]
}
}
删除项目（id）{
获取（'/api/v1/story/'+id{
方法：“删除”，
})
.then（response=>response.json（））
。然后（响应=>{
如果（响应['response']=“success”）{
这是我的国家({
//这就是它所说的。状态未定义
卡片：this.state.card.filter（s=>s.storyId！==id）
});
}否则{
toastr.warning（'dit项为al-verwijderd'，''，{positionClass:“右下角烤面包”，超时：40000}）
}
})
}
componentDidMount（）{
获取（'/api/v1/overview'）
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这个.setState（{
卡片：responseJson
})
})
}
render（）{return（
)}

这里发生的事情是，页面加载并填充卡片数组（可以工作），然后将卡片加载到DOM中，当您单击一个图标时，它应该从卡片数组中筛选出已删除的卡片，然后将状态设置为已筛选的数组

但每当我访问this.setstate并尝试过滤时，它都会给我以下错误：

app.js:66418未捕获（承诺中）类型错误：无法读取未定义的属性“卡”

我希望我解释得足够好，有人能帮我。提前谢谢！

试试这个。 还有，为什么要用2.then（）？为什么不只用一行并使用

（）=>{在这里你可以写多行}

已编辑：如果使用箭头函数，则不需要绑定此函数的上下文

如果不想使用箭头函数，则需要在构造函数中绑定上下文

this.myFunction=this.myFunction.bind（this）；

类概述扩展组件{
构造函数（）{
超级（）；
此.state={
卡片：[]
}
}
deleteItem=（id）=>{
获取（'/api/v1/story/'+id{
方法：“删除”，
})
.then（response=>response.json（））
。然后（响应=>{
如果（响应['response']=“success”）{
这是我的国家({
//这就是它所说的。状态未定义
卡片：this.state.card.filter（s=>s.storyId！==id）
});
}否则{
toastr.warning（'dit项为al-verwijderd'，''，{positionClass:“右下角烤面包”，超时：40000}）
}
})
}
componentDidMount（）{
获取（'/api/v1/overview'）
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这个.setState（{
卡片：responseJson
})
})
}
render（）{return（
)}

您无法通过此代码获得该错误，因为您观察到的实际问题是调用未定义的

deleteItem

bind

构造函数中的函数：

this.deleteItem=this.deleteItem.bind（this）

另外，如何在函数中获得

id

？如上所述^^^，它也应该是

onClick={this.deleteItem}

最好解释您的建议的哪一部分解决了OP的问题。例如，您使用的是箭头函数，因此OP可以使用

此

上下文。尽量避免只删除答案：）此外，这里还需要两个

然后

，因为

获取

在第一个响应（正文）中返回承诺。