[英]How can update my useState variable if I'm already using useEffeck hook?
I'm working in a personal project to learn more about the way react hooks works.我正在从事一个个人项目,以了解更多关于反应钩子工作方式的信息。 Recently I posted a question where I was using a variable inside an axios call and in the moment when I tried to update it (setVariable), it didn't worked.
最近我发布了一个问题,我在 axios 调用中使用了一个变量,当我尝试更新它(setVariable)时,它没有用。 The answer I learn that useState make asynchonous calls so my variable didn't update so I can use useEffect to solve that.
我了解到 useState 进行异步调用的答案,所以我的变量没有更新,所以我可以使用 useEffect 来解决这个问题。
But now I'm doing another axios call and I'm already using my useEffect hook in that component so I think it can't be used twice.但是现在我正在做另一个 axios 调用,并且我已经在该组件中使用了我的 useEffect 钩子,所以我认为它不能被使用两次。 Can you please explain me what can I do in those cases?
你能解释一下在这些情况下我能做什么吗?
Here is the component that I'm working with:这是我正在使用的组件:
type modalBodyFormProps = {
handleSubmit: any,
objectS: any
} }
const ModalBodyUpdatePreparacion: React.FC = (props: modalBodyFormProps) => { const ModalBodyUpdatePreparacion: React.FC = (props: modalBodyFormProps) => {
const[stockPreparaciones, setStockPreparaciones] = useState<any[]>([]);
const[ingsPreparaciones, setIngsPreparaciones] = useState<any[]>([]);
useEffect(() => {
getPreparaciones();
getIngredientePrep();
},[stockPreparaciones.length]);
const getPreparaciones = () => {
console.log(props.objectS);
axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + props.objectS)
.then(result => {
console.log(result);
setStockPreparaciones(result.data.preparaciones); //Here is where I need to use useEffect hook so this value can be updated
console.log(stockPreparaciones);
}).catch(console.log);
}
const getIngredientePrep = () => {
stockPreparaciones.map(st => {
axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + st.codigo_preparacion)
.then(result => {
console.log(result);
setIngsPreparaciones([...ingsPreparaciones, result.data]); //I want to update this value, however it appears as empty.
console.log(ingsPreparaciones);
});
});
}
return(
<div>
</div>
);}
Thank you for your help谢谢您的帮助
You can use the hook useEffect the times you want.您可以使用钩子 useEffect 您想要的时间。 The only thing you must be aware is about the dependency array and be careful about combinations.
您唯一必须注意的是依赖数组,并注意组合。 You can even do this.
你甚至可以这样做。
useEffect(()=> {
doSomethingWithFoo();
}, [foo]);
useEffect(()=> {
doSomethingWithBar();
}, [bar]);
useEffect(()=> {
doSomethingWithFooOrBar();
}, [foo, bar]);
Separate effects as per need.根据需要分开效果。 Also, make use of async-await pattern.
另外,使用异步等待模式。
Like so:像这样:
const { objectS } = props;
useEffect(
async () => {
const result = await axios.get(`heroku_url/?codigo=${objectS}`);
setStockPreparaciones(result.data.preparaciones);
}
, [objectS]
);
// watcher for state updates
useEffect(
() => {
console.log(stockPreparaciones)
}
, [stockPreparaciones]
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.