我有一个页面，我将产品添加到产品列表中。添加成功后，应用程序需要返回列表以再次查看添加了新条目的产品。重定向到产品列表工作正常，我再次看到产品，但是新产品不在列表中。为了查看新添加的产品，我必须重新加载页面。由于某种原因，该组件没有被重新渲染，因此没有从服务器请求新产品列表。
为什么会这样呢？如何在不强制刷新整个应用程序的情况下重新渲染ProductPage。
我已在codesandbox中重现了该问题。
雅各布·史密斯（Jacob Smith）在上述评论中几乎涵盖了这一点。但是，为了稍微解释一下他，您有一个类似于以下内容的设置：
// App.jsx
return (
<>
<h1>Some header</h1>
<Switch>
<Route path='productlist' component={ProductList} />
</Switch>
</>
)
// 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>
</>
)
由于此数据流，仅在ProductList装入，卸载并再次装入时才装入新数据。然而，没有你要么ProductPage还是AddProduct不断卸除ProductList，因为它们都是在该组件呈现。
可以通过两种主要方法解决此问题，将的渲染AddProduct移到顶层，App.jsx或者，如果Axios.post返回新数据，则可以将状态设置方法传递给AddProduct并在.then回调中设置状态，因为未卸载父组件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句