Reach Router下表单提交API成功后如何刷新页面并清空输入？

看起来你已经搞定了API提交的核心逻辑，只是在提交成功后的页面刷新和表单清空环节卡壳了，我来帮你一步步修复：

问题根源分析 #

1. 你的Action Creator里直接用了navigate但没正确引入，这部分代码根本不会生效；
2. 表单提交成功后，组件的本地状态没重置，所以输入框内容还留在原地；
3. 就算路由导航到同一个页面，React Router默认不会重新加载组件，页面自然不会自动刷新。

具体解决方案 #

我们需要调整Action Creator让它返回Promise，这样组件就能准确监听提交成功的时机，然后在组件里完成清空表单和页面刷新操作：

1. 修改Action Creator，返回Promise #

让addNewProduct返回axios请求的Promise，方便组件捕获请求结果：

export const addNewProduct = (ProductName) => (dispatch) => {
  const productData = new FormData();
  productData.append("ProductName", ProductName);
  
  // 返回axios请求的Promise，让组件能监听成功/失败回调
  return axios.post("http://localhost:4500/products/", productData, {
    headers: {
      "Content-Type": "multipart/form-data",
      "Authorization": localStorage.getItem("Authorization")
    }
  })
  .then(res => {
    console.log(res.data);
    return res; // 将结果返回给组件
  })
  .catch(err => {
    console.log(`The error we're getting from the backend--->${err}`);
    throw err; // 抛出错误，让组件可以捕获处理
  });
};

2. 更新组件的提交处理函数 #

在handleProductSubmit里，调用addNewProduct后监听成功回调，完成清空表单和页面刷新：

handleProductSubmit = (event) => {
  event.preventDefault();
  this.props.addNewProduct(this.state.ProductName)
    .then(() => {
      // 第一步：清空表单输入框的本地状态
      this.setState({ ProductName: "" });
      // 第二步：强制刷新页面，确保和API数据同步
      window.location.reload();
      
      // 如果你不想硬刷新，想用React Router的方式重新加载组件，可以替换成：
      // this.props.navigate("/Home/admin", { replace: true });
      // 不过这种方式需要额外配置路由组件监听变化，硬刷新更直接满足你的需求
    })
    .catch(err => {
      // 可选：处理提交失败的情况，比如给用户提示
      console.error("产品提交失败:", err);
    });
};

3. 修正mapDispatchToProps的错误 #

你的mapDispatchToProps里引用了未引入的createNewLogin，这会导致报错，需要移除它：

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ addNewProduct }, dispatch);
};

为什么这样能解决问题？ #

• 让Action Creator返回Promise，组件可以准确捕获API请求成功的时机；
• this.setState({ ProductName: "" })直接重置组件本地状态，瞬间清空输入框；
• window.location.reload()强制刷新整个页面，确保页面内容和最新的API数据完全同步。

内容的提问来源于stack exchange，提问作者Sarthak Batra