Question

我有一个CommentList组件和一个CommentForm组件。我的CommentList在其状态下有一个CommentForm组件数组，称为注释。

这是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.comments”包装在div这样的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>
    )
  }
}

我知道我需要在渲染之前将Component包裹在div中，但是为什么除非我包裹列表，删除操作才能起作用？

编辑：

这是我用来设置状态并填充评论数组的功能

  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 })
      })
  }

Answer 1

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

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

Answer 2

您的代码有2个问题

当您查看如何调用onDelete时，将直接定义该方法，但是将映射到i的参数是不确定的。

更改

     onDelete={this.onDelete}

               to 

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

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

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

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>
    );
  }

除非包裹在div中，否则从数组中删除组件将无法正常工作

2 个答案: