javascript - 从 Reactjs 上未定义的 api 接收的 JSON 对象

Question

我一直在做我的仪表板项目。这是我的应用程序从我的 API 接收到一个未定义的对象。我一直在测试我的邮递员，它工作正常。这是我的代码。

这是我的 action.js

import debounce from 'debounce-promise';
import {
    START_FETCHING_SOCIAL_MEDIA,
    ERROR_FETCHING_SOCIAL_MEDIA,
    SUCCESS_FETCHING_SOCIAL_MEDIA,
    SET_PAGE,
    SET_KEYWORD,
    NEXT_PAGE,
    PREV_PAGE,
    
} from './SocialMediaConstants';

import { getSocialMedia } from './api/socialMedia';


let dbouncedFetchSocialMedia = debounce(getSocialMedia, 1000)

export const fetchSocialMedia = () => {
    return async (dispatch, getState) => {
        dispatch(startFetchingSocialMedia())
        let perPage = getState().socialMedia.perPage || 9;
        let currentPage = getState().socialMedia.currentPage || 1;
        let keyword = getState().socialMedia.keyword || '';
        const params = {
            limit: perPage,
            skip: (currentPage * perPage) - perPage,
            q: keyword
        }
        console.log('fetching...')
        try {
            console.log('success fetch')
            let { data: {data, count}} = await dbouncedFetchSocialMedia(params);
            dispatch(successFetchingSocialMedia({data, count}))
            console.log(dispatch(successFetchingSocialMedia({data, count})))
        } catch (err) {
            console.log('failed fetch')
            dispatch(errorFetchingSocialMedia(err))
            
        }
    }
}


export const startFetchingSocialMedia = () => {
    return {
        type: START_FETCHING_SOCIAL_MEDIA,
    }
}

export const successFetchingSocialMedia = (payload) => {
    // console.log(payload)
    return {
        type: SUCCESS_FETCHING_SOCIAL_MEDIA,
        ...payload
        
    }
}

export const errorFetchingSocialMedia = () => {
    return {
        type: ERROR_FETCHING_SOCIAL_MEDIA
    }
}

这是我的 reducer.js

import {
    START_FETCHING_SOCIAL_MEDIA,
    ERROR_FETCHING_SOCIAL_MEDIA,
    SUCCESS_FETCHING_SOCIAL_MEDIA,
    SET_PAGE,
    SET_KEYWORD,
    NEXT_PAGE,
    PREV_PAGE
    
} from './SocialMediaConstants'

const statuslist = {
    idle: 'idle',
    proccess: 'proccess',
    success: 'success',
    error: 'error'
}

const initialState = {
    data: [],
    currentPage: 1,
    totalItems: -1,
    perPage: 6,
    keyword: '',
    status: statuslist.idle
};

export default function SocialMediaReducer(state = initialState, action){
    switch(action.type){
        
        case START_FETCHING_SOCIAL_MEDIA:
            return {...state, status: statuslist.proccess, data: []}

        case SUCCESS_FETCHING_SOCIAL_MEDIA:
            // console.log(...state)
            return {...state, data: action.data, totalItems: action.count, status: statuslist.success }
    
        
        case ERROR_FETCHING_SOCIAL_MEDIA:
            return {...state, status: statuslist.error}

        
        case SET_PAGE:
            return {...state, currentPage: action.currentPage}

        case SET_KEYWORD:
            return {...state, keyword: action.keyword}

        case NEXT_PAGE:
            return {...state, currentPage: state.currentPage + 1}

        case PREV_PAGE:
            return {...state, currentPage: state.currentPage - 1}
        default:
            return state;
    }
}

这是我的 api/socialMedia.js

import axios from 'axios'
import { config } from '../../../../config'

export async function getSocialMedia(params){
    console.log('hit the api')
    return await axios.get(`${config.api_host}/api/social-media`, {
        params
    })  
}

这个页面

import * as React from "react";
import {useSubheader} from "../../../_metronic/layout";
import { useDispatch, useSelector } from 'react-redux';
import { fetchSocialMedia } from "./SocialMediaActions";

export default function SocialMediaPage(){
  let dispatch = useDispatch();
  let socMeds = useSelector(state => state.socialMedia);
  const suhbeader = useSubheader();
  suhbeader.setTitle("Social Media");

  React.useEffect(() => {
    dispatch(fetchSocialMedia())
  }, [dispatch])

  return (
    <div>
      halo
      {socMeds && socMeds.data && socMeds.data.map((socialMedia, index) => {
        console.log('nungguin ya')
        return <div>
          {index} - {socialMedia.platform}
          </div>
      })}
    </div>
  ); 

};

这是来自控制台

在此处输入图像描述

标签： javascriptreactjsapireact-reduxundefined