如何將項目添加到 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

工作應用程序，我可以在其中將產品添加到監視列表。

工作演示應用程序