Я создал API (для обновления - PutMapping), который должен обновляться, когда я нажимаю одну кнопку покупки, но проблема здесь в том, что когда я нажимаю одну кнопку покупки, API вызывается для всех трех кнопок.
Есть 3 карты с 3 кнопками на каждой, каждая карта имеет свои награды и очки отыгрывания, и соответственно таблица должна обновляться. Вот следующий код:
использованиеЭффект
const url = "http://localhost:8086/updatedata/";
function clickFunc(points,rewards){
useEffect(()=>{
return axios.put(url+points+"/"+rewards);
});
}
Следующий код предназначен для реагирующих карт и кнопок:
<div class = "col-md-4">
<div class = "blog-post">
<a href = "blog-post.html" class = "post-img">
<img src = {bms} alt = ""/>
</a>
<div class = "post-content">
<h2>Bookmyshow </h2>
<h4 style = {{color:"green"}}>Redemption Points: 800</h4>
<h2 style = {{color:"red",align:"center"}}>Rs 300</h2>
<button variant = "contained" onClick = {clickFunc(800,300)} >BUY NOW</button>
</div>
</div>
</div>
<div class = "col-md-4">
<div class = "blog-post">
<a href = "blog-post.html" class = "post-img">
<img src = {hm} alt = ""/>
</a>
<div class = "post-content">
<h2>H&M Voucher</h2>
<h4 style = {{color:"green"}}>Redemption Points: 3000</h4>
<h2 style = {{color:"red",align:"center"}}>Rs 1000</h2>
<button variant = "contained" onClick = {axios.put("http://localhost:8086/updatedata/3000/1000")}>BUY NOW</button>
</div>
</div>
</div>
<div class = "col-md-4">
<div class = "blog-post">
<a href = "blog-post.html" class = "post-img">
<img src = {amazon} alt = ""/>
</a>
<div class = "post-content">
<h2>Amazon Voucher</h2>
<h4 style = {{color:"green"}}>Redemption Points: 1500</h4>
<h2 style = {{color:"red",align:"center"}}>Rs 750</h2>
<button variant = "contained" onSubmit = {axios.put("http://localhost:8086/updatedata/1500/750")}>BUY NOW</button>
</div>
</div>
</div>
Используемый запрос String sql = "установить сведения об обновлении available_points=available_points-?, total_rewards=total_rewards+?;";
Теперь, когда я нажимаю на ваучер Bookmyshow и проверяю таблицу, доступные_баллы уменьшаются с предположительно 10000 до 4700 (т.е. общая сумма всех 3 ваучеров 10000 - (800+3000+1500) = 4700, а вознаграждения увеличиваются с 0 до 2050)
Как избежать обновления таблицы со всеми тремя, я хочу обновить только значения, где нажата кнопка «Купить сейчас», а не все. Пожалуйста, помогите, заранее спасибо. :)
также вы размещаете много нерелевантной информации, из-за чего ее действительно трудно читать и работать... постарайтесь минимизировать код для конкретной проблемы...
И почему в вашем обработчике кликов есть onEffect?
Потому что вы неправильно привязали события onClick и onSubmit. Без ()=>
функции будут вызываться каждый раз при рендеринге.
<button variant = "contained" onClick = {()=> clickFunc(800,300)} >BUY NOW</button>
<button variant = "contained" onClick = {() => axios.put("http://localhost:8086/updatedata/3000/1000")}>BUY NOW</button>
</div>
<button variant = "contained" onSubmit = {() => axios.put("http://localhost:8086/updatedata/1500/750")}>BUY NOW</button>
Кроме того, приведенная ниже реализация неверна. Вы не можете использовать хуки жизненного цикла внутри обычных функций.
const url = "http://localhost:8086/updatedata/";
function clickFunc(points,rewards){
useEffect(()=>{
return axios.put(url+points+"/"+rewards);
});
}
ваш код не имеет никакого смысла... какие ошибки вы получаете? не могли бы вы также обуть рабочий образец?