时间戳

首页 > 解决方案 > 在 POST 请求后反应从状态中的数组中删除项目

javascript - 在 POST 请求后反应从状态中的数组中删除项目

问题描述

我有一个反应组件，它在加载时从 api 端点获取“问题”列表。然后将它们显示在表格中。单击一个元素时，它会发送一个 POST 请求，告诉该服务器问题已解决。这一切都很好，但是现在，如果 POST 请求返回 200，我需要它从状态中删除该问题（因此从表中删除）。我试过下面的代码，但它说它无法读取行上未定义的属性“状态” this.state.issues，这表明它不知道“这个”是什么。

class IssueScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    fetch(`${apiRoot}/${this.props.match.params.id}`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      }
    })
      .then(response => response.json())
      .then(response =>
        this.setState({
          id: response.id,
          issues: response.issues
        })
      );
  }

  resolveIssue(issueID) {
    fetch(`${apiRoot}resolve_issue/`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      },
      body: JSON.stringify({
        id: issueID
      })
    }).then(function(res) {
      if (res.status === 200) {
        for (var i = 0; i < this.state.issues.length - 1; i++) {
          if (this.state.issues[i].id === issueID) {
            this.setState({ issues: this.state.issues.splice(i, 1) });
          }
        }
      } else {
        console.log("Problem");
      }
    });
  }

被resolveIssue调用： this.resolveIssue(id);在代码中进一步。

标签： javascriptarraysreactjs

解决方案

首先将您的函数表达式更改为箭头函数，因此this将指向正确的命名空间。

resolveIssue = (issueID) => {

还有屁股：

.then((res) => {

其次，Array#splice就地工作，这意味着将直接改变状态。在正确绑定你的resolveIssue函数或只是将其更改为箭头函数后，你的应用程序可能会由于mutation state错误而崩溃。我建议你spread syntax改用。

就像是：

this.setState({ issues: 
    [...this.state.issues.slice(0, i), ...this.state.issues.slice(i + 1)],
});

推荐阅读