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

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

React Hooks，对象状态未更新onSubmit

2 个答案: