使用Axios获取数据返回空数组？React+Redux问题排查

我正在学习React.js和Redux，尝试从JSONPlaceholder获取图片数据，API地址是https://jsonplaceholder.typicode.com/photos。浏览器控制台无报错，但始终无法获取到数据，不知道问题出在哪。

以下是我的代码：

imageSlice.js #

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

const initialState = {
  images: [],
  error: null,
  isLoading: false,
};

export const fetchImages = createAsyncThunk('images/fetchImages', async () => {
  const res = await axios.get('https://jsonplaceholder.typicode.com/photos');
  return res.data;
});

export const imageSlice = createSlice({
  name: 'images',
  initialState,
  extraReducers: builder => {
    builder.addCase(fetchImages.pending, state => {
      state.isLoading = true;
    });
    builder.addCase(fetchImages.fulfilled, (state, action) => {
      state.isLoading = false;
      state.images = action.payload;
      state.error = null;
    });
    builder.addCase(fetchImages.rejected, (state, action) => {
      state.isLoading = false;
      state.images = [];
      state.error = action.error.message;
    });
  },
});

// Action creators are generated for each case reducer function
export const {} = imageSlice.actions;

export default imageSlice.reducer;

store.js #

import { configureStore } from '@reduxjs/toolkit';
import imageReducer from './imageSlice';

export const store = configureStore({
  reducer: {
    images: imageReducer,
  },
});

Images.jsx #

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchImages } from '../redux/imageSlice';

const Images = () => {
  const { images } = useSelector(state => state.images);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchImages());
  }, []);
  console.log(images);

  return (
    <div className='container'>
      <h2>Images</h2>
    </div>
  );
};

export default Images;

在Images.jsx的第9行调用接口获取数据，但未得到任何数据。

问题分析与解决步骤 #

1. 缺失axios导入（核心问题）

imageSlice.js中使用了axios发起请求，但没有导入该库，这会导致代码执行到axios.get时静默失败（部分环境下可能不会抛出明显报错）。

解决：

• 先安装axios：

  npm install axios
  # 或
  yarn add axios
  

• 在imageSlice.js顶部添加导入语句：

  import axios from 'axios';
  

2. 未用Redux Provider包裹应用（常见遗漏）

如果你的根组件没有被Provider包裹，useSelector和useDispatch无法和Redux Store建立连接，dispatch的action不会被处理，state自然不会更新。

解决：
在应用入口文件（如index.js）中添加Provider包裹：

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

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

3. 调试优化建议

• 在fetchImages的rejected回调中添加错误日志，方便排查请求失败原因：

  builder.addCase(fetchImages.rejected, (state, action) => {
    state.isLoading = false;
    state.images = [];
    state.error = action.error.message;
    console.error('图片请求失败:', action.error.message);
  });
  

• 组件中监听加载状态和错误信息，提升调试体验：

  const { images, isLoading, error } = useSelector(state => state.images);
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(fetchImages());
  }, [dispatch]); // 添加dispatch依赖，符合React Hook规范
  
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>请求出错：{error}</div>;
  

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