反应不将道具传递给孩子答案

【问题标题】：React not passing props to child反应不将道具传递给孩子
【发布时间】：2023-03-18 16:58:01
【问题描述】：

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

在我的情况下

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

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

我的第二个问题是，当调用 http://localhost:3000/update/5e3615179d7a8e01d85147e1 时，我无法从路由中提取 :id，以便我可以从 state.products[] 中过滤出正确的产品并仅将所选产品传递给 @ 987654326@。 react-router-dom 的 useParams() 函数没有为我返回任何结果。我知道我只需要传递一个产品，但我也无法从路由中提取 /:id 的值。

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

谢谢，抢

【问题讨论】：

要查看问题，请在任何产品上单击“更新”并打开控制台。

标签： javascript reactjs components react-router-dom

【解决方案1】：

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

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

至于useParams，它是react-router-dom的API，支持React Hooks API，只适用于Functional Components，不适用于Class Components。

【讨论】：