如果我已经在使用 useEffeck 钩子，如何更新我的 useState 变量？

Question

我正在从事一个个人项目，以了解有关 react hooks 工作方式的更多信息。 最近我发布了一个问题，我在 axios 调用中使用了一个变量，在我尝试更新它 (setVariable( 的那一刻，它不起作用。我了解到的答案是 useState 进行异步调用，所以我的变量没有更新，所以我可以使用 useEffect 来解决这个问题。

但是现在我正在做另一个 axios 调用，我已经在该组件中使用了我的 useEffect 钩子，所以我认为它不能使用两次。你能解释一下在这些情况下我能做什么吗？

这是我正在使用的组件：

type modalBodyFormProps = {
handleSubmit: any,
objectS: any

}

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>
);}

谢谢你的帮助

Answer 1

您可以使用钩子使用效果您想要的时间。您唯一需要注意的是依赖数组，并注意组合。你甚至可以这样做。

useEffect(()=> {
doSomethingWithFoo();
}, [foo]);
useEffect(()=> {
doSomethingWithBar();
}, [bar]);
useEffect(()=> {
doSomethingWithFooOrBar();
}, [foo, bar]);

Answer 2

根据需要单独处理效果。此外，使用异步等待模式。

这样：

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]
)