如何解除 REACT state？

Question

全部。

我正在學習 REACT 並遇到了一個問題。

基本上，我想將一個“句柄狀態”function 移動到父組件 (App)，並在子組件 (MenuItem) 中調用它。

在 App 組件中，我創建了一個 function“handleClickFavorite”，它處理變量“isFavorite”的 state。

在 MenuItem 組件中，我將 function 和變量作為道具傳遞，並在 onClick 事件中使用它們。 基本上，每次單擊按鈕或 div 時，我都想在項目的兩個 CSS 類（收藏夾和非收藏夾）之間切換。

MenuList 部分只獲取數組的元素，這些元素在 MenuItem 中單獨呈現，並映射它們

應用組件：

 import React, { useState } from 'react'; import './App.css'; import MenuList from './components/MenuList'; import foodItems from './components/data.js'; const App = (props) => { const [isFavorite, setIsFavorite] = useState(props.isFavorite); const handleClickFavorite = () => { setIsFavorite(;isFavorite); }; return ( <div> <h1>Wild Restaurant Menu</h1> <MenuList isFavorite={isFavorite} handleClickFavorite={handleClickFavorite} foodItems={foodItems} /> </div> ); }; export default App;

菜單列表組件：

 import React from 'react'; import MenuItem from './MenuItem'; function MenuList({ foodItems }) { console.log(foodItems); return ( <div> {foodItems.map((element, index) => ( <MenuItem {...element} key={index} /> ))} </div> ); } export default MenuList;

菜單項組件：

 import React, { useState } from 'react'; import '../App.css'; function MenuItem(props) { //create a state isFavorite that has the inital value of isFavorite that comes from the props const { itemName, description, foodImage, price, isFavorite, handleClickFavorite, } = props; return ( <div className="itemContainer"> <div className="leftContainer"> <div className="imgContainer"> {/* the image will receive the url src from the props */} <img src={foodImage} alt="" /> </div> <div className="itemDescription"> {/* the h3 will receive the item name from the props */} <h3>{itemName}</h3> {/* the p will receive the item description from the props */} <p>{description}</p> </div> </div> <div className="rightContainer"> {/* the div will receive the item price from the props */} <div>{price} EUR</div> {/* the div with id favorite will have 2 attributes: - onClick, will call the method handleClickFavorite, - classname, that will be conditionally rendered, depending on the value of isFavorite from the component's state */} <div id="favorite" onClick={handleClickFavorite} className={isFavorite? 'isFavorite': 'notFavorite'} /> </div> </div> ); } export default MenuItem;

這是我第一次在這里提問，所以請保持溫和。 我嘗試了很多解決方案，但不幸的是沒有任何效果。 isFavorite 的 state 沒有改變，類也沒有改變。

有人能幫我嗎？

Answer 1

您的代碼之所以無法如您所願，是因為您沒有為 MenuItem 編寫道具。 您已經正確地將道具寫入 MenuList，因此您需要以相同的方式將 useState isFavorite 和 setIsFavorite 從 MenuList 分派到 MenuItem。 只需寫入function MenuList({ foodItems }) also isFavorite 和 setIsFavorite。 因此它將是function MenuList({ foodItems, isFavorite, setIsFavorite })並將它們作為道具分派給 MenuItem，就像您對 MenuList 所做的那樣。

一些筆記。 不喜歡2級道具鑽的可以關注state managers(redux, mob x, effector) 或者hook useContext。 因此，您無需道具即可在所有項目中獲取數據。

Answer 2

您實際上並沒有將道具傳遞給孩子。 在您的MenuList組件中，您只有foodItems作為道具。 所以你不能得到你需要的其他道具。 它們是isFavorite和handleClickFavorite 。

您的代碼塊和更改。

function MenuList({ foodItems }) {
  console.log(foodItems);
  return (
    <div>
      {foodItems.map((element, index) => (
        <MenuItem {...element} key={index} />
      ))}
    </div>
  );
}


// Updated code
function MenuList({ foodItems, isFavorite, handleClickFavorite}) {
  console.log(foodItems);
  return (
    <div>
      {foodItems.map((element, index) => (
        <MenuItem {...element} key={index} 
            isFavorite={isFavorite}
            handleClickFavorite={handleClickFavorite}
        />
      ))}
    </div>
  );
}

此外，如果你有一棵有很多深度的樹，你需要為每個級別的所有孩子傳遞所有道具。 就性能和代碼可讀性而言，這可能會令人惱火並降低代碼質量。

在這種情況下，您可以使用 React 上下文 API 或第三方庫，例如 redux。

並且您通過<MenuItem {...element} key={index} />的MenuItem組件中的{...element}將element傳播到道具中。 但我認為這可能不太好，因為 MenuItem 在實踐中可能有更多的道具或數據。 所以我建議像<MenuItem key={index} element={element} />一樣使用它。

然后你可以訪問 MenuItem 中的element ，如下所示。

function MenuItem(props) {
  //create a state isFavorite that has the inital value of isFavorite that comes from the props
  const {
    element: {
        itemName,
        description,
        foodImage,
        price,
    },
    isFavorite,
    handleClickFavorite,
  } = props;

...
}

希望這會有所幫助！