React Redux调用JSON Placeholder接口无法获取返回数据求助

问题排查与修复方案 #

存在的问题

• action调用方式错误：你定义的getCategory是符合redux-thunk规范的异步action创建函数，需要被useDispatch返回的dispatch方法包裹执行，不能直接将dispatch作为参数传入getCategory
• 依赖导入缺失：
  1. productAction.js中使用了axios但未导入，直接触发运行时报错导致接口请求中断
  2. categories.js中使用的memo、useEffect未从react包导入，会抛出未定义错误
  3. productAction.js catch分支中调用的returnErrors、clearErrorMessages未定义也未导入，请求报错时会直接中断逻辑，无法触发状态更新
• 组件无合法返回值：Categories组件未返回任何JSX内容，会触发React运行警告，可能影响组件生命周期正常执行
• 可选检查项：确认入口文件已用Provider包裹根组件并传入store，否则redux上下文无法正常注入组件

修正后的代码片段

1. productAction.js

// 新增axios导入
import axios from 'axios'
// 如果你未定义error相关action，先注释掉对应调用避免报错
// import { returnErrors, clearErrorMessages } from './errorActions'

export const getCategory = () => (dispatch) => {
        axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
            dispatch({
                type: 'GET_CATEGORY',
                payload: res.data
            });
        }).catch((err) => {
            console.log('请求异常：', err)
            // 确认对应action存在后再放开注释
            // dispatch(returnErrors(err.message, err?.response?.status || 500));
            // dispatch(clearErrorMessages());
        });
};

2. categories.js

// 新增react相关API导入
import { memo, useEffect } from 'react'
import { getCategory} from '../../actions/productActions';
import { useDispatch, useSelector } from 'react-redux';

const Categories = memo(() => {
    const dispatch = useDispatch();
    const productData = useSelector((state) => state.product);
    
    useEffect(() => {
        // 修正异步action调用方式
        dispatch(getCategory())
    }, [dispatch])

    console.log(productData.categories);
    // 增加合法组件返回内容
    return <div>分类数量：{productData.categories.length}</div>
});

export default Categories

3. 入口文件（index.js）检查参考

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import store from './store'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

内容的提问来源于stack exchange，提问作者Mohammed