Question

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

出问题的地方是Package prop钩内的useCallback没有更新。

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

无论我按几次按钮

我已尝试创建一个订单state，该订单每次Package prop更新时都会更新，但是每当我将Package设置为{{1 }}我遇到了无限循环。

我已经将scope添加到了Package钩子的scope中

示例

useCallback

我希望发生的事情是，每当我调用自定义React.useEffect(() => { setOrder(Package); }, [Package]);时，钩子usePostOrder中的Package的值始终是最新的以及最新传递的道具。

CustomHook

useCallback

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

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中的道具不会在自定义钩子中更新

1 个答案: