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

Question

我构建了一个自定义 post 挂钩，returns API 响应和 API post。我正在使用 useCallback 挂钩来设置 Response state

哪里出错了是Package prop没有在useCallback钩子里面更新。

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

不管按多少次

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

我已经将 Package 添加到 useCallback 挂钩的 scope 中

示例

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

我期望发生的是，每当我调用我的自定义 usePostOrder 挂钩 useCallback 中的 Package 的值始终与最新通过的道具保持同步。

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

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

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

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

React | props inside UseCallBack not updating inside custom hook

javascript

reactjs

react-native

react-hooks

usecallback