如何将项目添加到 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>

当我尝试检查时，结果显示项目已添加但无法传递到监视列表组件？如何使用道具传递这个值并显示它们？

非常感谢任何帮助。

万分感谢

Answer 1

在您的示例中，Button 没有在 handleWatchlist 中传递任何参数。我不知道 Button 组件是什么样子，但传递 arg 可能类似于下面的示例：

const Button = ({ onClick }) => {

  const value = "some value";

  return <button onClick={() => onClick(value)}>Button</button>;
};

const WatchList = () => {
...
return <Button onClick={handleWatchlist}>Add</Button>

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 add items to the watchlist in reactJs?

javascript

frontend

reactjs

react-hooks