我正在使用 React 構建一個網站。假設有產品可以通過單擊“添加到購物車”按鈕添加到購物車中。
目前，我只是嘗試通過控制臺在 reducer 中記錄“操作”來訪問每個“添加到購物車”按鈕，但其中只有一個按鈕可以被觸發。
產品代碼
import {useStateValue} from "./StateProvider"
function Product({id, title, image, price, rating}) {
//accepts props of each product
const [state, dispatch] = useStateValue()
const addToCart = () => {
dispatch({
type: "ADD_TO_CART",
item: {
id: id,
title: title,
image: image,
price: price,
rating: rating
}
})
}
return (
<div className='product'>
<div className="product-info">
<p>{title}</p>
<p className="product-price">
<small>$</small>
<strong>{price}</strong>
</p>
<div className="product-rating">
{Array(rating)
.fill()
.map((_, i) => (
<p>??</p>
))}
</div>
</div>
<img
src={image}
alt=""
/>
<button onClick={addToCart}>Add to cart</button>
</div>
)
}
StateProvider 的代碼
import React, {createContext, useContext, useReducer} from "react";
export const StateContext = createContext();
export const StateProvider = ({ reducer, initialState, children}) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);
我正在使用的 Reducer 代碼
export const initialState = {
cart: [],
}
const reducer = (state, action) => {
console.log(action);
switch(action.type) {
case 'ADD_TO_CART':
return{
...state,
cart: [...state.cart, action.item]
}
default:
return state;
}
}
我的網站總共有 6 個產品，除了最后一個console.log(action)在點擊時觸發。
在主索引檔案中，我使用此代碼匯入減速器
import reducer, { initialState } from './reducer';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<StateProvider initialState={initialState} reducer={reducer}>
<App />
</StateProvider>
</React.StrictMode>
);
我嘗試為每個產品添加一個唯一值，以更正 z-index，但沒有任何改變。有人能幫我嗎？
uj5u.com熱心網友回復：
問題出在CSS 檔案中，我不是很專心 :( 還有另一個帶有 z-index 的 div并且它被設定為減一（我沒有注意到減號）。這個 div 導致了覆寫按鈕，這就是為什么他們沒用 如果你有同樣的問題，請仔細檢查你的樣式檔案，尤其是到處都是div和z-index 。
uj5u.com熱心網友回復：
我認為應該是這樣的：
const [state, dispatch] = useReducer(Reducer, initialState);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/492763.html
標籤：javascript 反应 按钮
下一篇：獨立行按鈕墊表