react中onClick状态不更新

Question

叶海亚在这里

我在 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>
);

状态总是错误的

我想在收藏夹中添加产品而不重定向到单一产品页面

如果有人有其他方法来执行这个过程，你可以叙述

问候！

Answer 1

你需要使用 useEffect 钩子。像这样创建手柄点击功能：

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

然后使用一个 use effect hook 在状态改变时执行一个动作，像这样：

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

这样做的原因是 React 组件应该是纯的，这意味着它们对于相同的输入总是有相同的输出。因此，您希望在状态更改时发生的任何“副作用”，都必须发生在使用效果挂钩内，该挂钩将在每次状态更改时执行。