React中POST创建帖子成功后如何实现页面刷新？

为什么window.onload没用 #

window.onload是页面首次加载完成时才会触发的事件，手动调用它不会触发页面刷新，所以你之前的尝试无效。

方案一：强制整页刷新（最简单直接） #

在response.ok的代码块里直接调用window.location.reload()，这会强制浏览器重新加载当前页面，刷新所有数据：

if (response.ok) {
  // 强制刷新页面
  window.location.reload();
} else {
  console.log("Failed to create post.", response);
}

方案二：React式局部刷新（更推荐） #

作为单页应用，React更推荐通过状态更新来触发组件重新渲染，而非整页刷新。如果你的帖子列表在父组件中维护，可以按以下方式实现：

1. 父组件传递一个回调函数给CreatePostCard，用于创建成功后重新获取帖子数据
2. 创建成功后调用该回调，同时重置当前表单的输入状态

修改后的代码示例：

// 父组件中传递回调
<CreatePostCard onPostCreated={() => { /* 这里写重新获取帖子列表的逻辑 */ }} />

// CreatePostCard组件修改部分
const CreatePostCard = (props) => {
  const [titleInput, setTitleInput] = useState('');
  const [descriptionInput, setDescriptionInput] = useState('');
  // ...其他状态

  const handleFormSubmit = (e) => {
    e.preventDefault();
    // ...fetch请求逻辑
    fetch(url, { /* 配置 */ })
      .then((response) => {
        if (response.ok) {
          // 重置表单输入
          setTitleInput('');
          setDescriptionInput('');
          setDisplayCreatePost(false);
          // 调用父组件的回调，重新获取帖子数据
          props.onPostCreated();
        } else {
          console.log("Failed to create post.", response);
        }
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  };

  // ...其他代码
};

这种方式不会刷新整个页面，用户体验更好，也符合React的设计理念。

内容的提问来源于stack exchange，提问作者Benamara David