更新組件上的道具更改

Question

我正在嘗試創建一個顯示許多已保存項目的購物車。 為此，我創建了一個顯示購物車和數字的導航欄。 我將道具數量提供給導航欄。 道具金額是我想在購物車旁邊顯示的數字。 當我更新數量時，數字應該會改變，但不會。

我嘗試像這樣使用 useEffect 來更新它：

const Navbar = ({amount}) => {
  const [safedItems, setSafedItems] = useState(0);

  useEffect( () => {
    setSafedItems(amount)
    console.log(amount)

  }, [amount])

  return (
    <>
      <nav className={styles["nav-bar"]}>
        <a href="/" >
          <h2>Upcoming events</h2>
        </a>
        <SearchBar placeholder='Search for an event' />
        <a href="/calendar">
          <div className={styles["nav-bag"]}>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" className="bi bi-cart3" viewBox="0 0 16 16"  >
              <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
            <span className={styles['bag-quantity']}>
              <span>
                {safedItems}
              </span>
            </span>
          </div>
        </a>
      </nav>
    </>
    
  )
}

但它不工作。 我需要更改什么，以便導航欄更新？

編輯

這是我設置金額的方式

const [safedIds, setSafedIds] = useState(null)

function addSafedId (id) {
    if(safedIds !== null){
      if(!safedIds.includes(id)){
        let temp = safedIds;
        temp.push(id);
        setSafedIds(temp)
      }
    } else setSafedIds([id]);  
    console.warn(safedIds)
  }

和返回語句

      <Navbar amount={safedIds&&safedIds.length} />

Answer 1

在這個代碼塊中

 const [safedItems, setSafedItems] = useState(0);

 useEffect( () => {
 setSafedItems(amount)
 console.log(amount)

 }, [amount])

您將“amount”作為第二個參數傳遞給 useEffect，但“amount”不會在您的代碼中更改，那么 useEffect 將不會重新渲染組件。

嘗試刪除 useEffect bloc 代碼和此代碼“ const [safedItems, setSafedItems] = useState(0);”

然后像這樣直接將“金額”值分配給標簽

 <span className={styles['bag-quantity']}>
          <span>
            {amount}
          </span>
        </span>

Answer 2

在使用NavBar的其他組件中，數量變量是否使用 useState？

如果沒有，請使用它。 您的金額可能已更改，但該頁面永遠不會重新呈現。 在您的NavBar組件中使用 useEffect 和 useState 是沒有用的，您只需要像Adel Benyahia建議的那樣將數量直接傳遞給跨度：

<span className={styles['bag-quantity']}>
   <span>
      {amount}
   </span>
</span>

Answer 3

在您的父組件中更改這行代碼

 <Navbar amount={safedIds&&safedIds.length} />

至

<Navbar amount={safedIds} />

然后在您的導航欄組件中

const {amount} = props
return (<span>{amount&&amount.Length}<span>)