React Hooks，object state 未更新 onSubmit

Question

我正在使用 React Hooks 并创建了一个表单来提交博客文章。 我在编写 submitPost 逻辑时遇到问题。 我有一个帖子和 setPost 变量。 setPost 似乎没有用 submitPost function 中的新帖子更新帖子，所以我的 api 调用 function createPost 没有收到新的 req.body。 但是当我创建第二个 function changePost() 时，帖子会更新。 这是我的代码。

export default function NewPost({ props }) {
  const [post, setPost] = useState({
    title: "",
    img: "",
    content: "",
    user_id: 0,
  });
  const [img, setImg] = useState("");
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [userId, setUserId] = useState(0);

  useEffect(() => {
    const handleUser = async () => {
      try {
        const response = await verifyUser();
        console.log(response);
        setUserId(response.user.id);
      } catch (error) {
        console.log(error);
      }
    };
    handleUser();
  });

  const changePost = () => {
    const newPost = {
      title: title,
      img: img,
      content: content,
      user_id: userId,
    };

    setPost(newPost);
    console.log(post);
  };
  const submitPost = async (e) => {
    e.preventDefault();
    console.log(userId);
    try {
      console.log(title);
      changePost();
      console.log("submitPost", post);
      await createPost(post);
      props.history.push("/posts");
    } catch (error) {
      console.log(error);
    }
  };

  console.log(post);
  return (
    <div>
      <Nav />
      <div class="ui main text container segment mt-100">
        <div class="ui huge header salmon">New Blog </div>
        <form class="ui form" onSubmit={submitPost}>
          <div class="field">
            <label> Title </label>
            <input
              type="text"
              name="title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="title"
            />
          </div>

          <div class="field">
            <label> Image </label>
            <input
              type="text"
              name="img"
              value={img}
              onChange={(e) => setImg(e.target.value)}
              placeholder="image"
            />
          </div>

          <div class="field">
            <label> Body </label>
            <textarea
              name="content"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder="blog post goes here"
            >
              {" "}
            </textarea>
          </div>

          <input class="ui teal big basic button" type="submit" />
        </form>
      </div>
    </div>
  );
}

Answer 1

它不会工作。 您正在尝试创建一个帖子，其中您的post变量尚未更新。 您不需要创建那么多变量，只需使用post变量即可。 尝试使用以下代码。

export default function NewPost({ props }) {
  const [post, setPost] = useState({
    title: "",
    img: "",
    content: "",
    user_id: 0,
  });

  useEffect(() => {
    const handleUser = async () => {
      try {
        const response = await verifyUser();
        console.log(response);
        setPost({...post, user_id: response.user.id});
      } catch (error) {
        console.log(error);
      }
    };
    handleUser();
  });

  const submitPost = async (e) => {
    e.preventDefault();
    console.log(userId);
    try {
      console.log(title);
      console.log("submitPost", post);
      await createPost(post);
      props.history.push("/posts");
    } catch (error) {
      console.log(error);
    }
  };

  console.log(post);
  return (
    <div>
      <Nav />
      <div class="ui main text container segment mt-100">
        <div class="ui huge header salmon">New Blog </div>
        <form class="ui form" onSubmit={submitPost}>
          <div class="field">
            <label> Title </label>
            <input
              type="text"
              name="title"
              value={title}
              onChange={(e) => setPost({...post, title: e.target.value})}
              placeholder="title"
            />
          </div>

          <div class="field">
            <label> Image </label>
            <input
              type="text"
              name="img"
              value={img}
              onChange={(e) => setPost({...post, img: e.target.value})}
              placeholder="image"
            />
          </div>

          <div class="field">
            <label> Body </label>
            <textarea
              name="content"
              value={content}
              onChange={(e) => setPost({...post, content: e.target.value})}
              placeholder="blog post goes here"
            >
              {" "}
            </textarea>
          </div>

          <input class="ui teal big basic button" type="submit" />
        </form>
      </div>
    </div>
  );
}

Answer 2

just do this .

useEffect(()=>{
},[JSON.stringify(post)])..

setPost({ title,img,content,user_id});