React Hooks问题：useEffect外无法获取useState更新后的变量值？

问题原因 #

• React 状态更新会触发组件重渲染，新的状态值只会在下次渲染时生效，当前渲染周期内的所有函数拿到的都是当前闭包存储的旧状态值，所以你在setOrderList调用之后立刻打印orderList，拿到的一定是更新前的值。
• 你调用的useDrop没有传入依赖数组，会一直引用首次渲染时创建的addFoodToOrderList函数，这个函数闭包内的orderList永远是初始的空数组[]，所以不管你添加多少次条目，这里打印的都是初始空值。

解决方法 #

1. 如果你需要使用更新后的orderList，直接在监听orderList变化的useEffect中处理即可，这里拿到的永远是最新值。
2. 给useDrop添加依赖数组，或者用useCallback包裹addFoodToOrderList避免闭包过时，修改后的代码参考如下：

import { useCallback } from 'react'

export default function FoodCardContainer() {
    const [liked,setLiked] = useState("")
    
    function handleLike(e) {
        setLiked(prevNotes => {
            return [...prevNotes,e];
        });
    }
    const [orderList, setOrderList] = useState([]);
      
    // 用useCallback包裹，依赖变化时更新函数
    const addFoodToOrderList = useCallback((id) => {
       const orderItem = fooditems.filter((f) => id === f._id)
       setOrderList((preorderLists) => {
           return [...preorderLists,orderItem[0]]
       });
    }, [fooditems]); // 用到的外部变量都要加为依赖

    const [{ isOver }, drop] = useDrop(() => ({
        accept: "div",
        drop: (item) => addFoodToOrderList(item.id),
        collect: (monitor) => ({
          isOver: !!monitor.isOver(),
        }),
    }), [addFoodToOrderList]); // 把addFoodToOrderList加为useDrop的依赖
   
    useEffect(() => {
        console.log("最新的orderList：", orderList)
        // orderList更新后的逻辑都可以在这里处理
    }, [orderList])

    // 原有剩余逻辑
}

3. 如果你需要在调用setOrderList时就拿到本次更新后的值做处理，可以直接在状态更新的函数回调里操作：

setOrderList((preorderLists) => {
  const newList = [...preorderLists, orderItem[0]]
  // 这里的newList就是本次更新后的值，直接做你需要的处理即可
  console.log("本次更新后的orderList：", newList)
  return newList
});

内容的提问来源于stack exchange，提问作者TINTIN