如何解决useEffect在组件加载时触发,而不是在状态更改时触发,正如我已经设置的那样
我尝试在更改useState
时触发useEffect,但是,它仅在组件加载时触发一次(我根本不想要),代码有什么问题?
const [value,setValue] = useState('initial');
useEffect(()=>{
let url = "https://hacker-news.firebaseio.com/v0/topstories.json";
let count = 30;
axios({
method: 'post',url: '/api/grabIt',data: {
url: url,count: count
}
})
.then(function (res) {
console.log(res.data.response)
})
.catch(function (error) {
console.log(error)
});
},[value]);
return (
<div className={styles.displayType}>
<ButtonContainer/>
<Button buttonColor={!!isDarkMode}
onClick={ () => setValue('triggered')}
>FETCH</Button>
</div>
)
解决方法
对于您要实现的目标,不需要任何效果。 我会从这样的函数中处理提取操作:
// simplified the example
const [value,setValue] = useState("initial");
const handleFetch = () => {
setValue("triggered");
};
return (
<div>
<button onClick={handleFetch}>{value}</button>
</div>
);
,
在函数useEffect中,您已设置依赖项,包括value
。这意味着仅当您value
更改时才打电话。设置值后,triggered
。它永远不会改变,导致原始值字符串'triggered'==='triggered'。
您可以使用布尔值触发点击。示例:
const [value,setValue] = useState(false);
...
<Button buttonColor={!!isDarkMode}
onClick={ () => setValue(!value)}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。