无法理解React JS教程中的提交表单

Question

Here is the submit function for react JS tutorial here I can't understand the success function, because data is supposed to be an array. Yet on success, its overriding the array with a singular comment.

I'm using this code and overriding this array with one comment means the map function doesn't work, and it breaks it all.

Why is seemingly incorrect code in the tutorial and how do I fix it?

also, what is a better function than Date.now() for the comment id?

handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    // Optimistically set an id on the new comment. It will be replaced by an
    // id generated by the server. In a production application you would likely
    // not use Date.now() for this and would have a more robust system in place.
    comment.id = Date.now();
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        this.setState({data: comments});
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

Answer 1

Even though I thought it was a client side problem, I fixed it by changing the response from my server to be an array.

I won't mark this answer as accepted though as I believe there could be a client side way of solving this?

using DRF, and a custom viewset, I had to change the create view to return the same as the list view

def create(self, request, *args, **kwargs):
    object_serializer = self.get_serializer(data=request.data)
    object_serializer.is_valid(raise_exception=True)
    object_serializer.save()
    headers = self.get_success_headers(object_serializer.data)

    queryset = self.filter_queryset(self.get_queryset())
    page = self.paginate_queryset(queryset)
    if page is not None:
        serializer = self.get_serializer(page, many=True)
        return self.get_paginated_response(serializer.data)

    serializer = self.get_serializer(queryset, many=True)
    return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers)