javascript - React Hooks，对象状态未更新 onSubmit

Question

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

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

标签： javascriptreactjsreact-hooksstate

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