2

我创建了一个usePromiseReact Hook，它应该能够解析各种 javascript 承诺并返回每个结果和状态：数据、解析状态和错误。我能够让它在没有任何参数的情况下传递函数，但是当我尝试更改它以允许参数时，我得到一个无限循环。

const usePromise = (promise: any): [any, boolean, any] => {
  const [data, setData] = useState<object | null>(null);
  const [error, setError] = useState<object | null>(null);
  const [fetching, setFetchingState] = useState<boolean>(true);

  useEffect(() => {
    setFetchingState(true);
    promise
      .then((data: object) => {
        setData(data);
      })
      .catch((error: object) => {
        setError(error);
      })
      .finally(() => {
        setFetchingState(false);
      });
  }, [promise]);

  return [data, fetching, error];
};

const apiCall = (param?: string): Promise<any> => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ response: `Response generated with your param ${param}.` });
    }, 500);
  });
};

const App = (): React.Element => {
  // How can I pass an argument to apiCall?
  const [response, fetching, error] = usePromise(apiCall(5));
  console.log("render"); // This logs infinitely
  return <div>{JSON.stringify({ response, fetching, error })}</div>;
};

您可以在以下位置检查工作代码（不带参数）：https ://codesandbox.io/s/react-typescript-fl13w

和错误（标签卡住，请注意）：https ://codesandbox.io/s/react-typescript-9ow82

注意：我想在不使用 NPM 或类似的 usePromise 单函数库的情况下找到解决方案

4

1 回答 1

2

自定义挂钩可能会执行多次。你应该这样设计它，你想做的所有事情（例如API调用）都在一个useEffect钩子里。这可以通过一个回调来实现，然后在挂钩中调用该回调。

此外，稍微更安全：

 const usePromise = <T>(task: () => Promise<T>) => {
   const [state, setState] = useState<[T?, boolean, Error?]>([null, true, null]);


   useEffect(() => {
       task()
         .then(result => setState([result, false, null])
         .catch(error => setState([null, false, error]);      
  }, []); // << omit the condition here, functions don't equal each other²

  return state;
};

// Then used as 
usePromise(() => apiCall(5));

² 是的，这通常是一种不好的做法，但在task这里不应该改变，我认为这很好

根据要求，这是我在一些项目中使用的版本：

 export function useAPI<Q, R>(api: (query: Q) => Promise<R | never>) {
  const [state, setState] = useState<{ loading?: true, pending?: true, error?: string, errorCode?: number, result?: R }>({ pending: true });

  async function run(query: Q) {
    if(state.loading) return;
    setState({ loading: true });

    try {
        const result = await api(query);
        setState({ result });
    } catch(error) {
        if(error instanceof HTTPError) {
            console.error(`API Error: ${error.path}`, error);
            setState({ error: error.message, errorCode: error.code });
        } else {
            setState({ error: error.message, errorCode: NaN });
        }
    }
  }

  function reset() {
     setState({ pending: true });
  }

  return [state, run, reset] as const;

}
于 2019-10-28T18:59:50.717 回答