除非包装在 div 中，否则从数组中删除组件不起作用答案

【问题标题】：Deleting component from array not working unless wrapped in div除非包装在 div 中，否则从数组中删除组件不起作用
【发布时间】：2019-05-14 00:36:01
【问题描述】：

我有一个 CommentList 组件和一个 CommentForm 组件。我的 CommentList 有一个处于其状态的 CommentForm 组件数组，称为 cmets。

这是 CommentList 的渲染：

  render () {
    return (
      <div>
        <button type='button' className='btn btn-default' onClick= {this.onAddComment}>Ajouter commentaire</button>
        <br /><br />
          {this.state.comments}
      </div>
    )
  }

这是我作为道具传递给孩子的删除方法。

  onDelete (i) {
    var comments = this.state.comments
    delete comments[i]
    this.setState({ comments: comments })
  }

我刚刚意识到删除不起作用，除非我将“this.state.cmets”包装在这样的 div 中：

  render () {
    return (
      <div>
        <button type='button' className='btn btn-default' onClick={this.onAddComment}>Ajouter commentaire</button>
        <br /><br />
        <div>
          {this.state.comments}
        </div>
      </div>
    )
  }
}

我知道我需要在渲染之前将我的组件包装在一个 div 中，但是为什么除非我包装我的列表，否则删除不起作用？

编辑：

这是我用来设置状态和填充我的 cmets 数组的函数

  loadComments () {
    Axios.get(`${API}/${this.props.candidate_id}/comments.json`)
      .then(response => {
        let comments = response.data.map((obj, index) => {
          return (
            <CommentForm
              key={index}
              index={index}
              baskets={this.state.baskets}
              comment={obj}
              onDelete={this.onDelete}
              candidate_id={this.props.candidate_id} />
          )
        })
        this.setState({ comments: comments })
      })
  }

【问题讨论】：

这没有任何意义。如果你的 comments 变量是一个对象（我猜是的，因为你使用了 delete 关键字）你不能把它放到 JSX 中。你的应用应该会立即崩溃。
它是一个组件数组，我不能在一个组件上使用delete关键字吗？我在问题中添加了设置状态的函数
您不能在数组上使用delete 关键字。我的意思是，你可以，但这不是一个好的选择。请改用切片或拼接。
但是为什么除非我将它包装在一个 div 中，否则它不起作用？
您能否介绍一下comments 的基本结构以及onDelete 方法是如何被调用的？

标签： reactjs

【解决方案1】：

使用切片而不是删除。您需要获取新数组，因为状态是不可变的。

  onDelete(i) {
    this.setState(ps => {
      [...ps.comments.slice(0, i), ...ps.comments.slice(i + 1)];
    });
  }

【讨论】：

【解决方案2】：

您的代码有 2 个问题

当您查看onDelete 的调用方式时，您直接引用了该方法，但将映射到i 的参数将是未定义的。

改变

     onDelete={this.onDelete}

               to 

     onDelete={() => this.onDelete(index)}

改变条目不是一个好方法。而是构建一个新列表并更新状态。

我还建议comments 只直接包含响应，并在render 中使用jsx，而不是在状态中保持它。

loadComments() {
    Axios.get(`${API}/${this.props.candidate_id}/comments.json`).then(
      response => {
        this.setState({ comments: response.data });
      }
    );
  }

  onDelete(i) {
    let updatedComments = this.state.comments.filter((comment, index) => {
      return index !== i;
    });

    this.setState({ comments: updatedComments });
  }

  render() {
    return (
      <div>
        <button
          type="button"
          className="btn btn-default"
          onClick={this.onAddComment}
        >
          Ajouter commentaire
        </button>
        <br />
        <br />
        <div>
          {this.state.comments.map((obj, index) => {
            return (
              <CommentForm
                key={index}
                index={index}
                baskets={this.state.baskets}
                comment={obj}
                onDelete={() => this.onDelete(index)}
                candidate_id={this.props.candidate_id}
              />
            );
          })}
        </div>
      </div>
    );
  }

【讨论】：