React Hooks — проблема с useEffect и onClick

Я создал 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)

Как избежать обновления таблицы со всеми тремя, я хочу обновить только значения, где нажата кнопка «Купить сейчас», а не все. Пожалуйста, помогите, заранее спасибо. :)

ваш код не имеет никакого смысла... какие ошибки вы получаете? не могли бы вы также обуть рабочий образец?

adir abargil 20.12.2020 11:43

также вы размещаете много нерелевантной информации, из-за чего ее действительно трудно читать и работать... постарайтесь минимизировать код для конкретной проблемы...

adir abargil 20.12.2020 11:44

И почему в вашем обработчике кликов есть onEffect?

dpwr 20.12.2020 12:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
618
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Потому что вы неправильно привязали события 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);
    });
}

https://reactjs.org/docs/hooks-reference.html#useeffect

Другие вопросы по теме