我想在單擊產品時更新購物車。但我不知道，如何在另一個組件中呼叫該函式。
這是撰寫函式并保持購物車狀態的地方。
export const Cart = () => {
const [userId, setUserId] = useState(7);
const [cart, setCart] = useState([]);
const [outfitName, setOutfitName] = useState("");
const sendOutfit = () => {
axios.post(`{url}/postOutfit`, {
userId,
outfitName,
cart,
});
};
function addToCart(id) {
cart.push(id);
setCart(cart);
}
...
}
這里我要呼叫 addToCart 函式。
import { Cart } from "../../sites/Cart/Cart";
...
<div className="product-name">
<button
className="button is-small is-outlined is-primary"
onClick={() =>
Cart.addToCart(product.id) & changeButtonText
}
>
{buttonText}
</button>
</div>
當我嘗試執行此操作時，我收到以下錯誤訊息：
你對我有什么建議嗎？
非常感謝你！
uj5u.com熱心網友回復：
你不能那樣做。下面我寫了一個簡單的例子，這是一篇不錯的文章，我建議先閱讀它：組件和道具
const AddToCartButton = ({ setCart }) => {
return (
<button
onClick={() => {
setCart("item");
}}
></button>
);
};
const Cart = () => {
const [cart, setCart] = React.useState([]);
return <AddToCartButton setCart={setCart} />;
};
uj5u.com熱心網友回復：
React 中的方法回傳 JSX 值，這樣匯出方法是不正確的，如果要將方法匯出addToCart到另一個組件，則需要將此方法作為屬性發送或使用狀態管理，例如如下：
export const Cart = () => {
const [userId, setUserId] = useState(7);
const [cart, setCart] = useState([]);
const [outfitName, setOutfitName] = useState("");
const sendOutfit = () => {
axios.post(`{url}/postOutfit`, {
userId,
outfitName,
cart,
});
};
function addToCart(id) {
cart.push(id);
setCart(cart);
}
return <AnotherComponent addCartFunc={addToCart} />
}
然后就可以在宿主組件中使用這個方法了，如下：
export const Cart = ({addCartFunc}) => {
return (
<div className="product-name">
<button
className="button is-small is-outlined is-primary"
onClick={() =>
addCartFunc(product.id) & changeButtonText
}
>
{buttonText}
</button>
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426152.html
標籤：javascript 反应 dom