时间戳

首页 > 解决方案 > React Hooks：无法在 useEffect 之外访问更新的 useState 变量？

javascript - React Hooks：无法在 useEffect 之外访问更新的 useState 变量？

问题描述

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

在addFoodToOrderList和useEffect中，我正在打印相同的OrderList变量，但在addFoodToOrderList中输出为空，我知道 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])

我的控制台：

在此处输入图像描述

标签： javascriptreactjsreact-hooks

解决方案

似乎传递给的函数已drop被记忆并且从未更新。文档useDrop将此作为参数提到：

deps用于记忆的依赖数组。这类似于内置的 useMemoReact 钩子。默认值为function spec 的空数组，以及包含 object spec 的 spec 的数组。

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

所以你应该指定deps。

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

推荐阅读