无法使用 API 中的 react-redux 切片读取未定义的属性（读取 'map'）

Question

我正在尝试遍历切片中收到的项目，但出现错误无法读取未定义的属性（读取 'map'），我是 redux 的新手，我只是想在这里学习模式，后端和前端之间的连接很好，因为我在添加 redux 之前尝试过。

我的主屏幕组件：

function HomeScreen() {
  const dispatch = useDispatch();
  const Listvessel = useSelector((state) => state.vesselList.value);
  const { error, loading, vessels } = Listvessel;
  useEffect(() => {
    dispatch(vesselList());
  }, [dispatch]);

  return (
    <div>
      Fleet vessels :
      <div className="fleet-vessels-info">
        {vessels.map((vessel) => (
          <VesselCard vessel={vessel} />
        ))}
      </div>
    </div>
  );
}

export default HomeScreen;

称为容器的切片：

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import {
  VESSEL_LIST_REQUEST,
  VESSEL_LIST_SUCCESS,
  VESSEL_LIST_FAIL,
} from "../constants/vesselConstants";

export const vesselSlice = createSlice({
  name: "vesselList",
  initialState: {
    value: {
      name: "",
      component_count: 0,
      inventory_item_count: 0,
      image: "",
             },
  },
  reducers: {
    vesselList: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const {
  vesselList,
} =
  (keyword = "") =>
  async (dispatch) => {
    try {
      dispatch({ type: VESSEL_LIST_REQUEST });
      const { data } = await axios.get(
        "http://127.0.0.1:8000/api/vessels/info"
      );

      dispatch({
        type: VESSEL_LIST_SUCCESS,
        payload: data,
      });
    } catch (error) {
      dispatch({
        type: VESSEL_LIST_FAIL,
        payload:
          error.response && error.response.data.detail
            ? error.response.data.detail
            : error.message,
      });
    }
  };
export default vesselSlice.reducer;

api 看起来如何

[
    {
        "id": 1,
         "component_count": 3,
        "inventory_item_count": 1,
        "name": "Aylah",
        "imo": "Aylah123",
        "image": "http://127.0.0.1:8000/media/vessel_image/aylah.jpg"
    },]

Answer 1

实际上，我看不到 vessels 在哪里定义，它可能是 Listvessel，但它仍然可能会抛出错误，因为它可能还没有从 API。因此，您可能必须先检查变量是 null 还是空。像这样的东西：

if(!Listvessel){
return "Loading..."
}

return (
  <div> //your data or .map function</div>
)

无法使用 API 中的 react-redux 切片读取未定义的属性（读取 'map'）

Cannot read properties of undefined (reading 'map') using react-redux slice from an API

reactjs

react-redux

redux-toolkit

redux-selector