Reactjs 从API获取数据-未经处理的拒绝（TypeError）：对象（…）不是函数

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

未处理的拒绝（TypeError）：对象（…）不是函数

错误

我的

api.js

是：

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

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,
        }
    })
}

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;

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;

我的

receiptsAction.js

是：

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

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,
        }
    })
}

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;

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;

我的

receiptsReducer.js

是：

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

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,
        }
    })
}

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;

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;

我的

Home.js

是：

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

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,
        }
    })
}

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;

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的数据是一个对象。还试图给出

const initState={drinks:{drinks:[]}，}

。还尝试使用减速机中的

const initState={drinks:[]}

编写实际的

负载：{drinks:drinksData.data.drinks}

非常感谢您的帮助

您正在调用

baseUrl

，就好像它是一个函数一样，但它似乎只是一个

字符串

常量

await axios.get(baseUrl())

那应该是

await axios.get(baseUrl)

---

错误消息通常还包含一个堆栈跟踪，其中包含导致错误的确切行。它来自哪里？@phry它来自于'const-drinksData=wait-axios.get（baseUrl（））；`因为baseUrl不是一个函数。非常感谢。