0
162
VistasReact Hooks: ¿No se puede acceder a la variable useState actualizada fuera de useEffect?
Soy nuevo en reaccionar y crear la aplicación de reacción, en esta aplicación, los alimentos se pueden arrastrar a la lista de pedidos usando reaccionar dnd, el problema al que me enfrento es que no puedo obtener la variable OrderList actualizada en ninguna función fuera de useEffect,
en addFoodToOrderList , useEffect , estoy imprimiendo la misma variable OrderList pero en addFoodToOrderList la salida está vacía, sé que useState es una función asíncrona, pero al agregar el tercer elemento a la lista de pedidos, debería mostrar al menos los primeros 2 elementos pero está dando una matriz vacía (0 ) como salida, el caso es diferente para useEffect
código:
export default function FoodCardContainer() { const [liked,setLiked] = useState("") function handleLike(e) { setLiked(prevNotes => { return [...prevNotes,e]; }); } const [orderList, setOrderList] = useState([]); const [{ isOver }, drop] = useDrop(() => ({ accept: "div", drop: (item) => { addFoodToOrderList(item.id)}, collect: (monitor) => ({ isOver: !!monitor.isOver(), }), })); const addFoodToOrderList = (id) => { const orderItem = fooditems.filter((f) => id === f._id) setOrderList((preorderLists) => {return [...preorderLists,orderItem[0]]}); console.log("this one outside useEffect",orderList) }; useEffect(() => { console.log("this one inside useEffect",orderList) },[orderList])mi consola:
1 Respuestas
Responde la pregunta0
Parece que la función pasada a drop fue memorizada y nunca actualizada. Los documentos mencionan esto como parámetros para useDrop :
deps Una matriz de dependencia utilizada para la memorización. Esto se comporta como el gancho integrado useMemoReact. El valor predeterminado es una matriz vacía para la especificación de función y una matriz que contiene la especificación para una especificación de objeto.
Dado que proporcionó la especificación de la función, de forma predeterminada se vació la matriz como deps.
Por lo tanto, debe especificar deps.
const [{ isOver }, drop] = useDrop(() => ({ accept: "div", drop: (item) => { addFoodToOrderList(item.id) }, collect: (monitor) => ({ isOver: !!monitor.isOver(), }), }), [addFoodToOrderList]);