使用 useAxios 挂钩获取数据后如何调用方法答案

【问题标题】：How can you call a method after data is being fetched with useAxios hook使用 useAxios 挂钩获取数据后如何调用方法
【发布时间】：2019-10-10 09:09:40
【问题描述】：

我正在开发一个使用 React 和 react-hooks 的项目。我试图在后端返回响应后调用一个方法。目前我正在使用 Axios-hooks 库进行 React 调用：

export const useDataFromServer = (dataObjectId) => {
    return useAxios(
        {
            url: `/data/${dataObjectId}`,
            method: 'GET',
        },
        {
            manual: manual,
        }
    );
}

我正在尝试实现自己的钩子来包装 useAxios 调用，因为我无法从 useAxios 文档中找到任何方法：https://www.npmjs.com/package/axios-hooks:

export function useAxiosWithResponseCallback(config, options, callback) {
    const [isCallbackCalled, setIsCallbackCalled] = useState(false);
    const [axiosState, execute] = useAxios(config, options);

    useEffect(()=>{
        if (axiosState.loading) {
            setIsCallbackCalled(false);
        } else {
            if (!isCallbackCalled) {
                if (callback && typeof callback == 'function') {
                    callback([axiosState, execute]);
                }
                setIsCallbackCalled(true);
            }
        }
    }, [
        axiosState,
        isCallbackCalled,
        callback,
    ]);

    return [
        axiosState,
        execute,
    ];
}

但我不确定它是否适用于所有情况。

非常感谢任何帮助！

【问题讨论】：

标签： javascript reactjs axios react-hooks

【解决方案1】：

useAxios 是基于 Promise 的。

 const [{}, yourRequest] = useAxios(
    {
      ...AXIOS_CONFIG
    },
    { manual: true }
  )

然后你就可以了

yourRequest(yourData).then(here is your callback)

【讨论】：

【解决方案2】：

这是一个例子，可能会对你有所帮助。

function App() {
  const [{ data: getData, loading: getLoading, error: getError }] = useAxios(
    'https://reqres.in/api/users/1?delay=1'
  )

  const [
    { data: putData, loading: putLoading, error: putError },
    executePut
  ] = useAxios(
    {
      url: 'https://reqres.in/api/users/1',
      method: 'PUT'
    },
    { manual: true }
  )

  function updateData() {
    executePut({
      data: {
        ...getData,
        updatedAt: new Date().toISOString()
      }
    })
  }

  if (getLoading || putLoading) return <p>Loading...</p>
  if (getError || putError) return <p>Error!</p>

  return (
    <div>
      <button onClick={updateData}>update data</button>
      <pre>{JSON.stringify(putData || getData, null, 2)}</pre>
    </div>
  )
}

【讨论】：