时间戳

首页 > 解决方案 > 从 API 获取数据 - 未处理的拒绝 (TypeError): Object(...) is not a function

reactjs - 从 API 获取数据 - 未处理的拒绝 (TypeError): Object(...) is not a function

问题描述

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

未处理的拒绝 (TypeError)：Object(...) 不是函数

错误。

我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;

我尝试了什么：

  1. 检查，如果所有分号都在正确的位置
  2. 检查，如果 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);
}
  1. 检查，来自 API 的数据是一个对象。也试过给const initState = {drinks: {drinks: []},}。还尝试在减速器payload: {drinks: drinksData.data.drinks}中编写实际操作。const initState = {drinks: []}

将不胜感激任何帮助！

标签： reactjsreduxredux-thunk

解决方案

您正在调用 baseUrl它，就好像它是一个函数一样，但它似乎只是一个string常量。

await axios.get(baseUrl())

那应该是

await axios.get(baseUrl)

推荐阅读