ASYNC вызов пользовательского хука в React - PullRequest
Новая
       13

ASYNC вызов пользовательского хука в React

0 голосов
/ 09 апреля 2019

У меня проблема с async вызовами и моим пользовательским перехватом в React.

Мне нужно вызвать серию выборок с одного и того же пользовательского хука, но это не относится к цепочке ожидания.

У меня есть несколько кнопок, которые работают onClick, например: 

buttonDelete={() => deleteAssignedOpp(opportunity.id)}

async function deleteAssignedOpp(id) {
    await doFetch(`/opportuniy/assigned/${id}`, "DELETE");
    await doFetch("/opportuniy/assigned/list", "GET", "IN_PROGRESS");
  }

Эти кнопки вызывают пользовательский хук, например:

(я получил этот код из онлайн-уроков) 

function useFetch() {
  const [url, setUrl] = useState("");
  const [obj, setObj] = useState("");
  const [method, setMethod] = useState("GET");
  const [body, setBody] = useState();
  const [state, dispatch] = useStateValue();

  useEffect(() => {
    let didCancel = false;
    if (url) {
      const fetchData = async () => {
        dispatch({
          type: `FETCH_${obj}_INIT`
        });
        try {
          const response = await fetch(
            `https://myapiAddress${url}`,
            {
              method: method,
              //body: body,
              headers: new Headers({
                Authorization: myFunctionForAuthorization
              })
            }
          );
          const result = await response.json();
          if (!didCancel) {
            dispatch({
              type: `FETCH_${obj}_SUCCESS`,
              payload: result
            });
          }
        } catch (error) {
          if (!didCancel) {
            dispatch({
              type: `FETCH_${obj}_ERROR`,
              payload: { error }
            });
          }
        }
      };

      fetchData();

      return () => {
        didCancel = true;
      };
    }
  }, [method, body]);

  const doFetch = (url, method, obj, body = "") => {
    setUrl(url); 
    setObj(obj); 
    setMethod(method);
    setBody(body); 
  };

  return [doFetch];
}

export default useFetch;

Я ожидаю, что пользовательский хук будет вызываться в том же порядке, что и функция кнопки async/await.

Большое спасибо.

1 Ответ

1 голос
/ 09 апреля 2019

Вы можете попробовать Promise.all в своем хуке useEffects. Каждый выбор вернет обещание 

Promise.all([api1,api2]).then(function(values){
   console.log(values)
});

Будет ли это работать.

...