javascript - react Hook : Can't access updated useState variable outside useEffect?

Question

我是 React 和创建 React 应用程序的新手，在这个应用程序中，可以使用 react dnd 将食品拖动到订单列表，我面临的问题是我无法在 useEffect 之外的任何函数中获取更新的 OrderList 变量，

在 addFoodToOrderList 和 useEffect 中，我正在打印相同的 OrderList 变量，但在 addFoodToOrderList 中输出是empty ，我知道 useState 是异步函数，但是在将第 3 个项目添加到订单列表时，它应该至少显示前 2 个项目，但它给出空数组(0)作为输出，useEffect

代码:

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

我的控制台:

Answer 1

似乎传递给 drop 的函数已被内存并且从未更新过。docs将其作为 useDrop 的参数提及:

deps A dependency array used for memoization. This behaves like thebuilt-in useMemoReact hook. The default value is an empty array forfunction spec, and an array containing the spec for an object spec.

由于您提供了函数规范，它默认为空数组作为 deps。

所以你应该指定部门。

const [{
    isOver
}, drop] = useDrop(() => ({
    accept: "div",
    drop: (item) => {
        addFoodToOrderList(item.id)
    },
    collect: (monitor) => ({
        isOver: !!monitor.isOver(),
    }),
}), [addFoodToOrderList]);