反应 | UseCallBack 内的道具未在自定义钩子内更新

Question

我已经构建了一个自定义的自定义帖子挂钩，它返回 API 响应和 API 帖子。我正在使用useCallback钩子来设置Response state

出错的地方是钩子Package prop内部没有更新useCallback。

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

无论我按下按钮多少次

我尝试创建一个state每次Package prop更新时都会更新的订单，但是每当我设置Package为 中的一个值时，scope我都会得到一个无限循环。

我阿洛斯加Package进scope了的useCallback钩

例子

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

我期望发生的是，每当我调用我的自定义usePostOrder钩子时Package，里面的useCallback值总是与最新传递的 prop 保持同步。

自定义挂钩

/**
 * 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];
};

Jake Luby 稍作调整后回答

/**
 * 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, send) => {
  const [postOrder, setPostOrder] = React.useState();
  const [response, setResponse] = React.useState({
    config: {
      data: []
    },
    data: {
      id: 0
    }
  });

  React.useEffect(() => {
    const getData = async send => {
      //this will have the updated input Package
      await axios
        .post(ApiUrl + url, Package)
        .then(function(response) {
          setResponse(response);
        })
        .catch(function(error) {
          setResponse(error);
          console.log(error);
        });
    };

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

  return [response, postOrder];
};

useAsyncEndpoint.PropTypes = {
  url: PropTypes.url,
  user: PropTypes.object,
  club: PropTypes.object,
  cartItems: PropTypes.array
};

我怎么称呼这个钩子

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);
  };

Answer 1

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

您想要的是useEffect钩子并将 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]
}