javascript - React 不将 props 传递给 child

Question

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

StackBlitz

就我而言

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

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

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

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

谢谢，罗布

Answer 1

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

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

至于useParams，它是react-router-dom的一个API，支持React Hooks API，仅适用于功能组件，不适用于类组件。