Javascript React\u this3.deleteArticle不是一个函数

在查看了其他一些类似的帖子后，我仍然不确定为什么会收到以下错误：

TypeError:\u this3.deleteArticle不是函数

据我所知，问题是

deleteArticle

不包括在

状态中。然而，我认为
.bind（this）
应该将它绑定到
状态
，从而解决这个问题。为什么这不起作用？我能做些什么来纠正它

正在渲染方法中通过以下方式调用
deleteArticle
函数：

<td onClick={() => this.deleteArticle(article.Id).bind(this) }>
    <Glyphicon glyph='trash' />
</td>

以及完整的组件，以确保完整：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Glyphicon } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

export class ArticlesIndex extends Component {
  displayName = ArticlesIndex.name

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

    fetch('https://localhost:44360/api/Articles/')
      .then(response => response.json())
      .then(data => {
        this.setState({ articles: data, loading: false });
      });
  }

  static renderArticlesTable(articles) {
    return (
      <table className='table'>
        <thead>
          <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Description</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {articles.map(article =>
            <tr key={article.id}>
              <td>{article.id}</td>
              <td>{article.title}</td>
              <td dangerouslySetInnerHTML={{ __html: article.description }}></td>
              <td>
                <LinkContainer to={'/articles/edit/' + article.id}>
                    <Glyphicon glyph='edit' />
                </LinkContainer>
            </td>
            <td onClick={() => this.deleteArticle(article.Id).bind(this) }>
              <Glyphicon glyph='trash' />
            </td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : ArticlesIndex.renderArticlesTable(this.state.articles);

    return (
      <div>
        <h1>Articles</h1>
        {contents}
      </div>
    );
  }

  deleteArticle(id) {
    fetch('https://localhost:44360/api/articles/' + id, {  
        method: 'DELETE'
    }).then((response) => response.json())  
        .then((responseJson) => {  
            var deletedId = responseJson.id;

     var index = this.state.articles.findIndex(function(o){
        return o.id === deletedId;
     })  
      if (index !== -1){
        this.state.articles.splice(index, 1);
      } 
    })  
  }
}

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“react bootstrap”导入{Glyphicon}；
从“react router bootstrap”导入{LinkContainer}；
导出类ArticlesIndex扩展组件{
displayName=ArticlesIndex.name
建造师（道具）{
超级（道具）；
this.state={articles:[]，load:true}；
取（'https://localhost:44360/api/Articles/')
.then（response=>response.json（））
。然后（数据=>{
this.setState（{articles:data，load:false}）；
});
}
静态渲染列表（文章）{
返回(
身份证件
标题
描述
编辑
删除
{articles.map（article=>
{article.id}
{文章标题}
this.deleteArticle（article.Id）.bind（this）}>
)}
);
}
render（）{
让内容=this.state.loading
加载

：ArticlesIndex.renderaticlestable（this.state.articles）；
返回(
文章
{contents}
);
}
删除物品（id）{
取（'https://localhost:44360/api/articles/'+id，{
方法：“删除”
}).then（（response）=>response.json（））
.然后（（responseJson）=>{
var deletedId=responseJson.id；
var index=this.state.articles.findIndex（函数（o）{
返回o.id==deletedId；
})  
如果（索引！=-1）{
本.州.条款.拼接（索引，1）；
} 
})  
}
}
static

方法未绑定到类的实例，并且将具有与典型组件不同的上下文

这样做的结果是，类中的其他函数/变量将无法通过

this

关键字访问，因为它们的上下文不同

更改函数声明：

static renderArticlesTable(articles)

对下列事项：

renderArticlesTable = articles => 

可以解决你的问题，因为我不认为你的函数是静态的。此外，将其设置为箭头函数将自动将其绑定到类的上下文

您的电话：

 ArticlesIndex.renderArticlesTable(this.state.articles)

现在将是：

this.renderArticlesTable(this.state.articles)

我还建议将

deleteArticle

函数更改为不需要绑定的箭头函数：

deleteArticle = id => {

另外，不要在构造函数中设置promise来触发

setState

。如果

fetch

请求过早发送数据，您将设置未安装组件的状态。获取数据时使用

componentDidMount

：

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

componentDidMount(){
    fetch('https://localhost:44360/api/Articles/')
        .then(response => response.json())
        .then(data => {
            this.setState({ articles: data, loading: false });
        });
}

在这里，您还可以将三元条件直接放入JSX：

render() {
    const { loading, articles } = this.state

    return (
        <div>
            <h1>Articles</h1>
            {loading ? 
                <p><em>Loading...</em></p> 
                : 
                this.renderArticlesTable(articles)
            }
        </div>
    );
}

---

您正在从静态方法访问实例方法将

deleteArticle

更改为静态方法，并以这种方式调用它，但没有解决问题您无法在静态方法中访问

this

-

this

引用实例

。绑定（this）

不执行该函数，我注意到您的代码中还有一些其他问题，请查看我更新的答案。尽管你最初的问题似乎已经解决了，但它可能会对你以后有所帮助

render() {
    const { loading, articles } = this.state

    return (
        <div>
            <h1>Articles</h1>
            {loading ? 
                <p><em>Loading...</em></p> 
                : 
                this.renderArticlesTable(articles)
            }
        </div>
    );
}

deleteArticle = id => {
    fetch('https://localhost:44360/api/articles/' + id, {
        method: 'DELETE'
    }).then(response => response.json())
        .then(({ id }) => { //Deconstructs you responseJson
            this.sestState(prev => ({
                articles: prev.articles.filter(article => article.id !== id)
            }))
        })
}