时间戳

首页 > 解决方案 > 通过 React 中的回调函数获取 API

javascript - 通过 React 中的回调函数获取 API

问题描述

我有一个函数，它连接到 API 并返回数据：

    import {API_KEY, API_URL} from "./constants";
    
    // /**
    //  * Fetch all tasks
    //  * @param {function} successCallback - Function that saves incoming data 
    //  */
export const getOperations = async (id, successCallback) => {
    try {
      const response = await fetch(`${API_URL}/tasks/${id}/operations`, {
        headers: {
          Authorization: API_KEY,
        },
      });
  
      const data = await response.json();

  
      if (data.error) {
        throw new Error('Error!');
      }
  
      successCallback(data.data);
    } catch (err) {
      console.log(err);
    }
  };

然后，在我的一个反应组件中，我调用该函数以从指定的 API 获取数据：道具是必需的 ID。

const [operations, setOperations] = useState([])
console.log(props)
useEffect(() => {
    try {
        getOperations(data => (props, setOperations(data)))
    } catch(e) {
        console.log(e)
    }
}, [])

问题是，我的 API 看起来像：

`...api/tasks/function%20(data)%20%7B%20%20%20%20%20%20%20%20return%20props,%20setOperations(data);%20%20%20%`20%20%20%7D/operations`

所以我收到 400 错误。有人可以解释一下如何在这种情况下获取 API URL，例如：

/api/tasks/{id}/operations

提前致谢。

标签： javascriptreactjsapi

解决方案

  • 您可以只返回数据，而不是将回调传递给函数的结果。
export const getOperations = async (id) => {
    try {
      const response = await fetch(`${API_URL}/tasks/${id}/operations`, {
        headers: {
          Authorization: API_KEY,
        },
      });
  
      const data = await response.json();

  
      if (data.error) {
        throw new Error('Error!');
      }

      return data.data;
    } catch (err) {
      console.log(err);
    }
  };

useEffect(() => {
  async function apiCall() {
    try {
       const data = await getOperations(props.id);
       setOperations(data)
    } catch(err) {
      console.log(err)
    }
  }

  apiCall();
}, [props.id])

推荐阅读