不要将道具传递给孩子

Question

我是React的新手，并尝试建立一个基本的CRUD应用程序作为示例。

StackBlitz

就我而言

<EditProduct 
   products     = {this.state.products} 
   handleSubmit = {this.handleProductUpdate} />

component标签，一个空的product []数组正在传递给prop。我知道state.products已填充，因为它传递给<Product>组件，并且可以在控制台中看到它。我以为这可能是一个异步问题，但是即使使用了模拟数据也发生了。

[我的第二个问题是，当调用:id时，我无法从路由中提取http://localhost:3000/update/5e3615179d7a8e01d85147e1，因此我无法从state.products []中过滤出正确的产品，而仅将选定的产品向下传递到<EditProduct> ]。 react-router-dom的useParams（）函数不会为我返回任何结果。我知道我只需要传递一种产品，但是我也很难从路由中提取/：id的值。

我已经找到了CRUD教程，但是没有像这样使用路由器。我不知道为什么会导致这个问题。我已经为此工作了好几天。任何帮助将不胜感激。

谢谢，罗布

Answer 1

[当您使用document.location.replace时，基本上是页面重新加载，这将卸载您的App组件并再次重新安装（您可以通过将控制台放置在componentDidMount组件中的App中进行检查），这意味着EditProduct在使用更新的数据重新呈现之前，它将再次收到您的初始状态（为空数组）。但是，在构造函数中，您只会收到初始状态。

我的建议是使用Link提供的react-router-dom组件以避免重新加载页面。 Demo

对于useParams，它是react-router-dom的API，它支持React Hooks API，该API仅在功能组件中起作用，而在类组件中不起作用。