Petua untuk menggunakan useEffect untuk mengekalkan keadaan warna latar belakang

Question

Saya cuba menyimpan warna latar belakang butang togol senarai hajat supaya apabila pengguna bergerak melintasi halaman, warna butang itu kekal "hitam" untuk menunjukkan kepada pengguna bahawa mereka telah menyimpan item itu ke senarai hajat.

const Item = (props) =>
  const dispatch = useDispatch();
  const [latar belakang, setBackground] = useState(false);

  fungsi addToCartHandler(produk) {
    dispatch(addToCart(product));
  }

  function toggleWishlistHandler(product) {
    dispatch(toggleItem(product));
    setBackground((semasa) => !semasa);
  }

  kembali (
    

      

        
        

          
{props.title}
          
£{props.price}.00
        
        

          
 toggleWishlistHandler(props.product)}
            gaya={{
              warna latar belakang: "hitam"
            }}
          >
            
          
          
 addToCartHandler(props.product)}
          >
            
          
        
      
    
  );
};

eksport Item lalai;            

Answer 1

Anda boleh menyimpan warna dalam storan tempatan.

// 检查是否设置为黑色
  const [background, setBackground] = useState(localStorage.getItem('wishlistBackground') === 'black');


// 每当背景颜色发生变化时，将其保存到本地存储中
  useEffect(() => {
    localStorage.setItem('wishlistBackground', background ? 'black' : 'orange');
  }, [background]);