无法使用 redux 异步函数读取未定义 useEffect 钩子的属性“map”

Question

我正在尝试学习 React-Redux 与 axios 异步方法的使用，我使用

useEffect

钩子来调用异步函数并分派操作来存储数据并将数据分配给状态，但是我无法获取运行后的状态。我确实从API获取了数据，它只是没有分配给

channel

状态，并且不渲染。

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './modules/counterStore';
import channelReducer from './modules/channelStore';

// create store with reducer
const store = configureStore({
  reducer: {
    channel: channelReducer,
  },
});

export default store;

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const channelStore = createSlice({
  name: "channelStore",
  initialState: {
    channel: [],
  },
  reducers: {
    setChannel: (state, action) => {
      state.channel = action.payload;
    },
  },
});

const { setChannel } = channelStore.actions;
const channelReducer = channelStore.reducer;

const fetchChannelList = () => {
  return async (dispatch) => {
    await axios.get("http://geek.itheima.net/v1_0/channels").then(
      (res) => {
        dispatch(setChannel(res.data.data.channels))
        console.log(res.data.data.channels)
      }
    );
  };
}

export { fetchChannelList };
export default channelReducer;

import './App.css';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';
import { fetchChannelList } from './store/modules/channelStore';

function App() {
  const { channelList } = useSelector(state => state.channel)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchChannelList())
  }, [dispatch])

  return (
    <div >
      <ul>
        {channelList?.map(item => {
          return (<li key={item.id}>{item.name}</li>)
        })}
      </ul>
    </div>
  );
}

export default App;

我试图从 api 获取数据并使用调度操作将数据分配给状态并在页面中呈现。

Answer 1

可能的问题

您正在设置

channel

状态，但 UI 正在尝试解构所选

channelList

中的某些

state.channel

属性，该属性是一个仅具有

channel

属性（数组）的对象。

const channelStore = createSlice({
  name: "channelStore",
  initialState: {
    channel: [], // <-- array
  },
  reducers: {
    setChannel: (state, action) => {
      state.channel = action.payload; // <-- array
    },
  },
});

const fetchChannelList = () => {
  return async (dispatch) => {
    await axios.get("http://geek.itheima.net/v1_0/channels").then(
      (res) => {
        dispatch(setChannel(res.data.data.channels)) // <-- array
        console.log(res.data.data.channels)
      }
    );
  };
}

const {
  channelList // <-- undefined property
} = useSelector(state => state.channel) // <-- channel state, e.g. { channel }

...

{channelList?.map(item => {
  return (
    <li key={item.id}>{item.name}</li>
  )
})}

错误 shouldn't 发生在您提供的代码示例中，因为您在

channelList

上使用可选链接运算符，但实际代码中可能并非如此。无论哪种方式，

channelList

对于您所维护的状态都是不正确的。

解决方案

选择正确的状态。

state.channel.channel

是

channelStore

切片所维护的数组。

const channel = useSelector(state => state.channel.channel);

...

{channel.map(item => (
  <li key={item.id}>{item.name}</li>
))}