如何将项目添加到 reactJs 中的监视列表？

Question

我想弄清楚如何将项目添加到监视列表，

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

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

请查看我尝试过的代码。

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

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

这是道具钻探，即在我的 App.js 中执行 useState 操作，这是我有产品和监视列表组件的主页。

这是我建议其他人使用的最好方法是使用contextAPI 和 useContext hooks 。 在应用程序的任何位置传递任何数据的简单方法。

请在代码框上查看完整代码以及下面的工作解决方案。

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

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

工作演示应用程序