Javascript React | UseCallBack内的道具未在自定义挂钩内更新

我已经构建了一个定制的post钩子，它返回API响应和API post。我正在使用

useCallback

hook设置

响应状态

出错的地方是

包属性在
useCallback
钩子中没有更新

当我在
useCallback
hook外部记录
Package
时，我在属性内部获得了正确的数据。但是，当我在
useCallback
钩子中记录
Package prop
时，
Package
的值不会改变

不管我按多少次按钮

我已经尝试创建一个订单
状态
，每当
包属性
更新时都会更新，但是每当我将
包
设置为
范围
中的值时，我就会得到一个无限循环

我已经在
useCallback
钩子的
scope
中添加了
Package

示例

  React.useEffect(() => {
    setOrder(Package);
  }, [Package]);

我希望发生的是每当我调用我的自定义
usePostOrder
钩住
useCallback
中的
包
的值总是最新的

CustomHook

/**
 * custom post hook that returns the API response and the API post function
 * @param {string} url
 * @param {object} Package
 * @returns {array} and @param {function}
 */

export const usePostOrder = (url, Package) => {
  const [loading, setLoading] = React.useState(true);
  const [order, setOrder] = React.useState(Package);
  const [response, setResponse] = React.useState({
    config: {
      data: []
    },
    data: {
      id: 0
    }
  });

  console.log("outside func", Package);
  const postOrder = React.useCallback(async () => {
    console.log("inside func", Package);
  }, [url, loading, Package]);

  return [response, postOrder];
};

杰克·鲁比的回答
稍作调整

我怎么叫这个钩子

import {usePostOrder} from "./yourHooksFolder"
  const [send, setSend] = React.useState(false);
  const [response, postOrder] = usePostOrder(
    "url",
    createOrder(user, store, cartItems),
    send
  );

  React.useEffect(() => {
    setSend(false);
  }, [response]);

// send order
  const onGoToPaymentPressed = () => {
    setSend(true);
  };




useCallback
不应该这样使用。它实际上并不运行该函数，它只是将其记忆，以便在渲染之间不会重新创建相同的函数

您需要的是
useffect
挂钩，并将postOrder作为状态的一部分：

export const usePostOrder = (url, Package) => {
  const [postOrder, setPostOrder] = React.useState()
  const [response, setResponse] = React.useState({
    config: {
      data: []
    },
    data: {
      id: 0
    }
  })


  React.useEffect(() => {
    const getData = async url => {
        //this will have the updated input Package
        console.log(Package) 

        //here is where you'll have your REST calls

        //set your data which will then update the return values in the hook and cause a rerender
        setPostOrder(returnValue)
        setResponse(someResponse)
    }

    getData()
  }, [url, Package]) //this will run when url or Package changes

  return [response, postOrder]
}

谢谢你的回复！我还决定传递一个布尔值的
send
prop
。如果此值为true，则它将执行
getData（）
函数。防止不必要的请求。你会推荐这个吗？不，我会推荐使用useEffect，因为它可以在没有额外侦听器的情况下实现你想要的功能
export const usePostOrder = (url, Package) => {
  const [postOrder, setPostOrder] = React.useState()
  const [response, setResponse] = React.useState({
    config: {
      data: []
    },
    data: {
      id: 0
    }
  })


  React.useEffect(() => {
    const getData = async url => {
        //this will have the updated input Package
        console.log(Package) 

        //here is where you'll have your REST calls

        //set your data which will then update the return values in the hook and cause a rerender
        setPostOrder(returnValue)
        setResponse(someResponse)
    }

    getData()
  }, [url, Package]) //this will run when url or Package changes

  return [response, postOrder]
}