Реагировать |реквизиты внутри 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, всегда соответствует последней переданной пропе.

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