如何将对象传递给 reactJs 中的另一个组件？

Question

我正在想办法将项目添加到关注列表，

我在这里尝试执行的步骤是，当用户单击添加按钮时，应将项目添加到我创建的监视列表 page/component。

请查看组件的层次结构。我想在监视列表页面上显示添加的项目。

请看我试过的代码。

const [watchlist, setWatchlist] = useState ([]);

const handleWatchlist = (movieData) => {
   const newList = [...watchlist, movieData]
   setWatchlist(newList)
   console.log(newList)
}




<Button className = {classes.cardButton}size = "small" onClick = {  ()=> handleWatchlist(movie) }> Add </Button>

当我尝试检查时，结果是，它显示项目已添加到控制台以及进入状态但无法传递到监视列表组件？我如何使用 prop 传递这个值并在监视列表组件中显示它们？还是它的 props 不是将任何对象传递到组件的正确方法？

控制台结果如下

非常感谢您的帮助。请在下面找到 link 到完整代码

https://codesandbox.io/s/determined-nightingale-m2mtn?file=/src/components/Products/Watchlist.jsx

万分感谢

Answer 1

检查你的代码后，你在传递道具时犯了一个错误。目前您正在这样做：

const Watchlist = (watchlist) => {

你应该首先通过以下方式解构并获得道具：

const Watchlist = ({ watchlist }) => {

Answer 2

感谢您的支持，但我通过使用两种方法找到了解决方案，它们是

这是 props 钻孔，即在我的 App.js 中执行 useState 操作，这是我的主页，我有产品和监视列表组件。
这是我建议其他人使用的最好方法，也是使用 contextAPI 和 useContext 挂钩。一种在应用程序中的任何位置传递任何数据的简单易行的方法。

请在下面的 codesandbox 上查看完整代码和工作解决方案。

https://codesandbox.io/s/determined-nightingale-m2mtn?file=/src/components/Products

工作应用程序，我可以在其中将产品添加到关注列表。

working demo app

如何将对象传递给 reactJs 中的另一个组件？

How to pass object to another component in reactJs?

javascript

frontend

reactjs