如何在 SPA 中获取当前状态（react hooks）？

Question

我创建了一个博客（单页应用程序）。我可以在单个页面中看到每个 post。我单击编辑以更新内容。当我跳转到编辑页面时，如何获取编辑页面中singlePost的当前状态？我可以将状态作为道具转移到不同的页面吗？谢谢！

singlePostPage.js

const { id } = useParams();
  const [singlePost, setSinglePost] = useState(null);
  const history = useHistory();

  useEffect(() => {
    getSinglePost(id).then((data) => setSinglePost(data[0]));
  }, [id, singlePost]);

  useEffect(() => {
    return () => setSinglePost(null);
  }, []);

  const handleDeletePost = () => {
    deletePost(id).then(() => history.push("/"));
  };

  const handleEditPost = () => {
    history.push(`/editPost/${id}`);
  };

  return (
    <PostPageContainer>
      {singlePost && <h1>{singlePost.title}</h1>}
      {singlePost && <h4>{timeConverter(singlePost.createdAt)}</h4>}
      <PostContent>{singlePost && singlePost.body}</PostContent>
      {singlePost && <button onClick={handleEditPost}>Edit</button>}
      {singlePost && <button onClick={handleDeletePost}>Delete</button>}
    </PostPageContainer>
  );

editPostPage.js

const { id } = useParams();
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [errorMessage, setErrorMessage] = useState();

  const history = useHistory();

  const handlePostSubmit = () => {
    updatePost({ title, content, id }).then((res) => {
      if (res.ok === 0) {
        return setErrorMessage(res.message);
      }
      history.push("/");
    });
  };

  const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  const handleContentChange = (e) => {
    setContent(e.target.value);
  };

  return (
    <PostFormContainer>
      <PostForm onSubmit={handlePostSubmit}>
        <TitleInput type="text" onChange={handleTitleChange} value={title} />
        <ContentInput
          onChange={handleContentChange}
          value={content}
          rows="10"
        />
        <SubmitBtn>Submit</SubmitBtn>
      </PostForm>
    </PostFormContainer>
  );

Answer 1

按照您在此处采用的方法，几乎没有什么方法可以达到您的预期。

由于您使用路由导航到编辑页面，因此您可以使用路由中的查询参数传递来自状态的值。（这并不理想，因为博客 post 可以包含长字符串）

处理这种情况的最佳方法是使用状态管理库(Redux) 或 React Context API。

因此您必须全局管理您的状态，并将所需的详细信息从全局状态提取到页面。

如何在 SPA 中获取当前状态（react hooks）？

How to get the current state in SPA (react hooks)?

single-page-application

reactjs