如何重新加載組件 ("<comment /> ) 在 reactjs 中？

Question

我正在研究反應項目。 當我們單擊 Post Comment 按鈕時，我試圖重新加載組件（ <Comment /> ）。 我實現了 onSubmit function，如下所示。 但它正在重新加載整個 window。 我只想重新加載那個“”組件，而不是整個 window。 誰能幫我解決這個問題？ 我不明白該怎么做，請幫助......！

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import ImageHelper from "../helper/ImageHelper";
import { getoneBlog, postBlogComment } from "../helper/coreapicalls";
import { useHistory } from "react-router-dom";
import { isAutheticated } from "../../auth/helper/index";
import cogoToast from "cogo-toast";
import "../../styles.css";
import Comment from "./Comment";
import ShareButton from "react-web-share-button";

const Fullblog = (config) => {
  const useremail = isAutheticated() && isAutheticated().user.email;
  const blogId = useParams();
  const id = blogId._Id;
  // console.log(id);
  const history = useHistory();

  const [blog, setBlog] = useState({
    title: "",
    description: "",
    tags: "",
    photo: "",
    comment: "",
    loading: false,
    error: "",
    createdBlog: "",
    getaRedirect: false,
  });
  const [value, setvalue] = useState({
    user: useremail,
    content: "",
    err: "",
    success: false,
  });
  const [error, seterror] = useState(false);
  const [loading, setLoading] = useState(false);
  const { user, content, err, success } = value;

  const onInputChange = (name) => (event) => {
    setvalue({ ...value, err: false, [name]: event.target.value });
  };

  const onSubmit = (event) => {
    event.preventDefault();
    setvalue({ ...value, err: false });
    postBlogComment(id, { user, content })
      .then((data) => {
        if (data.error) {
          setvalue({ ...value, err: data.error, success: false });
        } else {
          setvalue({
            ...value,
            user: useremail,
            content: "",
            err: "",
            success: true,
          });
         
        }
      })
      .catch(console.log("Error in sending Comment"));
  };

  const loadBlog = () => {
    getoneBlog(id).then((data) => {
      if (data.error) {
        seterror(data.error);
      } else {
        setBlog(data);
        // console.log(data);
      }
    });
    setLoading(true);
  };

  useEffect(() => {
    loadBlog();
  }, []);
  ///////////////////////////// Post Submit Event ///////////////////

  const successMessage = () => {
    return (
      <div className="">
        <div className="">
          <div
            className="alert alert-success"
            style={{ display: success ? "" : "none" }}
          >
            Comment Posted..!
          </div>
        </div>
      </div>
    );
  };

  const errorMessage = () => {
    return (
      <div className="">
        <div className="">
          <div
            className="alert alert-danger"
            style={{ display: err ? "" : "none" }}
          >
            {err}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div>
      <div className="py-md-5 py-3">
        <div className="Fullblog container">
          <div>
            <h1 className="FullblogTittle">{blog.title}</h1>
            <p className="tags text-right">{blog.tags}</p>
            {loading ? (
              <ImageHelper blog={blog} />
            ) : (
              <div class="spinner-border text-danger" role="status"></div>
            )}
            <div
              className="description"
              dangerouslySetInnerHTML={{ __html: blog.description }}
            />
            <span>
              <ShareButton
                buttonStyle={{
                  color: "#ffca08",
                  background: "#fff",
                  padding: "10px 12px",
                  border: "none",
                  width: "100%",
                }}
              />
            </span>
            <div className="container Comment_stytum mt-4">
              {successMessage()}
              {errorMessage()}
              <div className="mx-sm-3 mb-2">
                <div className="">
                  <textarea
                    className="comment_input"
                    name="content"
                    value={content}
                    onChange={onInputChange("content")}
                    placeholder="Write Comment"
                  ></textarea>
                </div>
                <input
                  className="d-none"
                  name="user"
                  value={user}
                  onChange={onInputChange("user")}
                />
                <button type="submit" onClick={onSubmit} className="post-btn">
                  Post Comment
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Comment />
    </div>
  );
};

export default Fullblog;

Answer 1

你能用這個修改來測試嗎？

<form className="mx-sm-3 mb-2" onSubmot={onSubmit}>
  <div className="">
    <textarea
      className="comment_input"
      name="content"
      value={content}
      onChange={onInputChange("content")}
      placeholder="Write Comment"
    ></textarea>
  </div>
  <input
    className="d-none"
    name="user"
    value={user}
    onChange={onInputChange("user")}
  />
  <button type="submit" className="post-btn">
    Post Comment
  </button>
</form>

因為使用button type='submit'即將提交一個表單（但沒有），通常使用submit ，我們在form上聲明該方法。

Answer 2

要重新渲染組件，您應該更新他的 state 或道具，在您的情況下，我建議您嘗試查找兩個組件之間的關系，例如將評論數據作為道具發送，然后添加新評論后更新 state 和評論組件從 state 獲取數據作為道具，因此它將自動重新渲染，否則，您可以使用 forceUpdate() 但我不建議這樣做

https://reactjs.org/docs/react-component.html#forceupdate