Question

我希望能够创建评论，然后将其与其余评论一起显示，而无需刷新页面。问题是，每当我创建注释时，所有属性都是不确定的（我从表单发送的body属性除外），这会导致其中断（因为它无法读取要在屏幕上显示的任何属性））。但是，刷新页面后，所有属性均已正确设置，并且可以正常运行（创建的注释与数据库中的预期一致）。我认为这意味着我遇到了加载问题。

我正在发送

{
    "body": "test"
}

并试图获得

{
    "id": "ac74c54a-4de2-4b20-90d5-7db48dbc1784",
    "parentId": "00000000-0000-0000-0000-000000000000",
    "body": "test",
    "createdAt": "2020-07-28T15:59:25.8819296",
    "username": "test",
    "displayName": "Test",
    "image": null,
    "children": []
}

它在Postman中工作得很好，所以我知道这是一个问题，因为它无法正确加载属性。我现在的逻辑是，每当提交表单时，我都会再次获取所有注释。由于某种原因，它无法正常工作。

这是表单代码（react-final-form会自动执行preventDefault）：

import React, { useContext, useState } from "react";
import { Form as FinalForm, Field } from "react-final-form";
import { RootStoreContext } from "../../../common/stores/rootStore";
import { Button, Form, Header, Segment } from "semantic-ui-react";
import { observer } from "mobx-react-lite";
import TextAreaInput from "../../../common/form/TextAreaInput";
import { IPost } from "../../../common/models/post";
import { Link } from "react-router-dom";
import { IComment, ICommentFormValues } from "../../../common/models/comment";

const PostReplyBox: React.FC<{ post: IPost }> = ({ post }) => {
  const rootStore = useContext(RootStoreContext);
  const { createComment, submitting, loadComments } = rootStore.commentStore;
  const { user } = rootStore.userStore;
  const [loading, setLoading] = useState(false);
  const [comment, setComment] = useState(new ICommentFormValues());

  const handleCommentFormSubmit = (values: any) => {
    const { ...comment } = values;
    if (!comment.id) {
      let newComment: IComment = {
        ...comment,
      };
      console.log(newComment);
      createComment(post.id, newComment).then(console.error);
      loadComments(post.id);
    }
  };

  return (
    <Segment clearing>
      <Header style={{ fontSize: "12px", marginBottom: "5px" }}>
        Comment as{" "}
        <Link to={`/profile/${user?.username}`}>{user?.displayName}</Link>
      </Header>
      <FinalForm
        initialValues={comment}
        onSubmit={handleCommentFormSubmit}
        render={({ handleSubmit, invalid, pristine, form }) => (
          <Form
            onSubmit={(e) => {
              handleSubmit(e);
              form.reset();
            }}
          >
            <Field
              name={"body"}
              placeholder={"What are your thoughts?"}
              value={comment.body}
              component={TextAreaInput}
            />
            <Button
              loading={submitting}
              disabled={loading || invalid || pristine}
              floated={"right"}
              positive
              type={"submit"}
              content={"comment"}
            />
          </Form>
        )}
      />
    </Segment>
  );
};

export default observer(PostReplyBox);

可观察物

  @observable
  commentRegistry = new Map();

  @observable
  comment: IComment | null = null;

这是创建评论的动作：

  @action
  createComment = async (post_id: string, comment: IComment) => {
    this.submitting = true;
    try {
      await agent.Comments.create(post_id, comment);
      runInAction("creating comment", () => {
        this.commentRegistry.set(comment.id, comment);
        this.submitting = false;
      });
    } catch (error) {
      runInAction("creating comment error", () => {
        this.submitting = false;
      });
      toast.error("Problem submitting data");
      console.log(error.response);
    }
  };

这是呼叫路线的地方：

const Comments = {
  create: (post_id: string, comment: IComment) =>
    requests.post(`/comments/${post_id}/comment`, comment),
};

这是评论的模型：

export interface IComment {
  id: string;
  parentId: string;
  postId: string;
  body: string;
  createdAt: Date;
  username: string;
  displayName: string;
  image: string;
  children: IComment[];
}

export class ICommentFormValues {
  id?: string = undefined;
  parentId?: string = undefined;
  postId?: string = undefined;
  body: string = "";
  createdAt?: Date = undefined;
  username?: string = undefined;
  displayName?: string = undefined;
  image?: string = undefined;
  constructor(comment: void) {
    Object.assign(this, comment);
  }
}

创建评论后如何显示评论？

0 个答案: