从 API 获取数据 - 未处理的拒绝 (TypeError)：对象 (...) 不是函数

Question

我正在学习使用 API、redux 和 thunk。我得到：

Unhandled Rejection (TypeError): Object(...) is not a function

错误。

我的api.js是：

export const baseUrl = 'https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Coffee_/_Tea';

我的 receiptsAction.js 是：

import axios from 'axios';
import {baseUrl} from '../api';

export const loadRecipes = () => async(dispatch) => {
    const drinksData = await axios.get(baseUrl());
    dispatch({
        type: "FETCH_RECIPES",
        payload: {
            drinks: drinksData.data,
        }
    })
}

我的receiptsReducer.js是：

const initState = {
    drinks: {},
}

const receiptsReducer = (state=initState, action) => {
    switch(action.type) {
        case "FETCH_RECIPES":
            return {
                ...state, drinks: action.payload.drinks
            }
        default:
            return {...state}
    }
}

export default receiptsReducer;

我的 Home.js 是：

import React, { useEffect } from 'react';
import {loadRecipes} from '../actions/receiptsAction';
import {useDispatch, useSelector} from 'react-redux';


const Home = () => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(loadRecipes())
    }, [dispatch]);

    return(
        <div>
            <p>Hello</p>
        </div>
    )
}

export default Home;

我试过的：

已检查，是否所有分号都在正确的位置
已检查，如果 APi 在 App.js 中完全有效并且加载信息正常：

const coctailHandler = async () => {
  let url = "https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Coffee_/_Tea";
  const coctails = await axios.get(url);
  console.log(coctails.data.drinks);
}

已检查，来自 API 的数据是一个对象。也试过给const initState = {drinks: {drinks: []},}。还尝试在减速器中用 const initState = {drinks: []} 编写 payload: {drinks: drinksData.data.drinks} 的动作。

感谢任何帮助！

Answer 1

你正在调用 baseUrl 就好像它是一个函数，但看起来它只是一个 string 常量。

await axios.get(baseUrl())

应该是

await axios.get(baseUrl)

从 API 获取数据 - 未处理的拒绝 (TypeError)：对象 (...) 不是函数

Fetching data from API - Unhandled Rejection (TypeError): Object(...) is not a function

reactjs

redux

redux-thunk