Reactjs 将条目添加到数据库后未刷新数据

我有一个页面，可以将产品添加到产品列表中。成功添加后，应用程序需要返回列表以再次查看添加了新条目的产品。重定向到产品列表工作正常，我再次看到产品，但新产品不在列表中。为了查看新添加的产品，我必须硬加载页面。由于某些原因，组件没有重新呈现，因此没有从服务器请求新产品列表

为什么会这样？如何在不强制进行完整应用程序刷新的情况下重新呈现ProductPage

---

我在这篇文章中重现了这个问题。

雅各布·史密斯在其上述评论中几乎涵盖了这一点。然而，在他的解释的基础上，您有一个如下的设置：

// App.jsx

return (
  <>
    <h1>Some header</h1>
    <Switch>
      <Route path='productlist' component={ProductList} />
    </Switch>
  </>
)

//App.jsx
返回(
某个标题
)

//ProductList.jsx
const[state，setState]=usetState（）；
useffect（（）=>{
loadSomeData（）。然后（数据=>{
设置状态（数据）；
})
}, []);
返回(
} />
)

由于此数据流，仅当

ProductList

装载、卸载并再次装载时，才会加载新数据。但是，您在

ProductPage

或

AddProduct

中所做的任何操作都不会卸载

ProductList

，因为它们都在该组件中呈现

---

这可以通过两种主要方式解决，将

AddProduct

的渲染移动到

App.jsx

的顶层，或者，如果

Axios.post

返回新数据，您可以将状态设置方法切换到

AddProduct

并在

中设置状态。然后
回调，因为父组件没有卸载。
这是由于您如何设置子例程造成的。产品列表的数据由
ProductPage
加载
ProductPage
包括两个子例程
ProductList
和
AddProduct
。在这两个子例程之间进行交换不会导致父级（
ProductPage
）重新装载。这意味着
useffect
不会重新运行，数据也不会更新。若要在不进行完全刷新的情况下查看它的工作情况，您可以在页面顶部添加另一个链接到您的
另一个页面
，添加产品后导航到
另一个页面
，然后返回到
产品页面
，组件将重新装载并获取新数据。谢谢，我所做的是将axios调用移到
ProductList
中，现在它可以正常工作了。我希望使用
ProductList
组件在不同的页面上列出不同的项目，从而传递我想要呈现的数据。我想我会有重复的组件对这两个数据执行两个不同的axios调用。
// ProductList.jsx

const [state, setState] = usetState();

useEffect(() => {
  loadSomeData().then(data => {
    setState(data);
  })
}, []);

return (
  <>
    <Switch>
      <Route path='productlist' render={() => <ProductPage data={state} />} />
      <Route path='productlist/add' component={AddProduct} />
    </Switch>
  </>
)