[英]Conditional statement not working in useEffect
It seems that the conditional statement does not apply properly within useEffect.似乎条件语句在 useEffect 中不能正确应用。 'UserPortInfo' is 1, but why 'templateCss' is applied as 'first-theme'?
'UserPortInfo' 为 1,但为什么将 'templateCss' 应用为 'first-theme'? And why does the console work several times?
为什么控制台可以工作多次?
// portfolio info get
const [userPortInfo, setUserPortInfo] = useState('');
const getPortInfo = () => {
axios
.get(`http://localhost:3001/portfolios`, {
headers: {
Authorization: `Bearer ${getToken}`,
},
})
.then((res) => {
const datas = res.data.data;
datas.forEach((e) => {
if (e.portfolio_idx === Number(portfolio_idx)) {
setUserPortInfo(e.template);
}
});
})
.catch((err) => console.log(err));
};
const [templateCss, setTemplateCss] = useState('');
useEffect(() => {
getUserInfo();
getPortfolio();
getPortInfo();
userPortInfo == 1
? setTemplateCss('second-theme')
: setTemplateCss('first-theme');
}, []);
console.log(userPortInfo);
console.log(templateCss);
The problem is that you read userPortInfo exactly once and before your async call completes.问题是您在异步调用完成之前只读取了一次 userPortInfo。
useEffect(() => {
getUserInfo();
getPortfolio();
getPortInfo();
userPortInfo == 1
? setTemplateCss('second-theme')
: setTemplateCss('first-theme');
}, []); <---- empty array means it is only run once
Maybe instead move it to another effect?也许改为将其移至另一种效果?
useEffect(() => {
getUserInfo();
getPortfolio();
getPortInfo();
}, [])
useEffect(() => {
userPortInfo == 1
? setTemplateCss('second-theme')
: setTemplateCss('first-theme');
}, []);
}, [userPortInfo] )
This means that when userPortInfo changes your css is updated这意味着当 userPortInfo 更改时,您的 css 会更新
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.