javascript 状态不更新onClick in react

edqdpe6u 于 2023-05-12 发布在 Java

关注(0)|答案(1)|浏览(115)

我是叶海亚
我正在用Strapi的帮助建立电子商务应用程序
这是我的代码：

// var is used because I want to use state in different functions

var [ functionIsRunning , setFunctionIsRunning] = useState(false);

const handleFavourite = () => {

    setFunctionIsRunning(true);
}

const navigateToSinglePage = () => {

    if(functionIsRunning=== false)

    {
        navigate("/product/" + id)
    }
}

return (
    <div className="product-card" onClick={navigateToSinglePage}>
        <div className="thumnail">
            <img src={process.env.REACT_APP_DEV_URL + data?.img?.data[0]?.attributes.url} alt="" />
            <div className="heart" onClick={handleFavourite}>
            <  AiOutlineHeart/>
            </div>
        </div>
        <div className="product-details">
            <span className="Name">{data?.Title}</span>
            <span className="price">Rs {data?.Price}</span>                
        </div>
    </div>
);

状态总是假的
我想在收藏夹中添加产品，而不重定向到单一产品页面
如果有人有其他方法来执行这个过程，你可以叙述
问候！

JavaScript

来源：https://stackoverflow.com/questions/76231402/state-do-not-update-onclick-in-react

1条答案

按热度按时间

f8rj6qna1#

你需要使用useEffect钩子。创建一个像这样的句柄单击函数：

handleClick = () => {
 #set your state variable to a new value here 
}

然后使用use effect钩子在状态发生变化时执行一个操作，如下所示：

useEffect(() => {
  #navigate user to a different page here
}, [<insert state variable to execute on here>]);

原因是react组件是纯的，这意味着它们总是对相同的输入具有相同的输出。因此，任何你想在状态改变时发生的“副作用”，都必须发生在一个use effect钩子中，这个钩子将在每次状态改变时执行。

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 状态不更新onClick in react

1条答案

相关问题

热门标签

最新问答