React Hooks-useEffect 和 onClick 问题答案

【问题标题】：React Hooks- useEffect and onClick issueReact Hooks-useEffect 和 onClick 问题
【发布时间】：2021-03-30 09:40:42
【问题描述】：

我创建了一个 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 Voucher 并查看表格，available_points 从假设的 10000 减少到 4700（即所有 3 个优惠券的总和 10000 - (800+3000+1500) = 4700，奖励从 0 到 2050）

如何避免使用所有三个更新表，我只想更新单击立即购买的值而不是全部。请帮忙，提前谢谢你。 :)

【问题讨论】：

你的代码没有任何意义......你得到什么错误？能否请您提供一个工作样品？
你还放了很多不相关的信息，这使得阅读和相处真的很困难......尽量减少特定问题的代码......
为什么你的点击处理程序中有一个onEffect？

标签： reactjs rest axios react-hooks use-effect

【解决方案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

【讨论】：