反应不将道具传递给孩子

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组件并再次重新安装（您可以通过将控制台放在{{1}中的componentDidMount中进行检查}组件），这意味着App将在重新呈现更新的数据之前再次收到您的初始状态（为空数组）。但是，在构造函数中，您只会收到初始状态。

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

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