Reactjs 映射到 redux 存储

Question

我正在尝试映射我从 API 收到并在我店里的物品这是数据在状态下的样子：

{
  vessels: {
    vessels: [
      {
        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'
      },
      {
        id: 2,
        component_count: 1,
        inventory_item_count: 0,
        name: 'Sinaa',
        imo: 'sinaa123',
        image: 'http://127.0.0.1:8000/media/vessel_image/DSCF9831.jpg'
      },
      {
        id: 3,
        component_count: 0,
        inventory_item_count: 0,
        name: 'Amman',
        imo: 'amman123',
        image: 'http://127.0.0.1:8000/media/vessel_image/amman.jpg'
      },
      {
        id: 4,
        component_count: 0,
        inventory_item_count: 0,
        name: 'Queen',
        imo: 'Queen 123',
        image: 'http://127.0.0.1:8000/media/vessel_image/1.jpg'
      }
    ]
  }
}

我只是想使用地图功能，但我似乎无法让它工作在这里，我试图打印所有船只的名称： OverviewFleet.js:

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchVessels } from "../../../features/vesselSlice";
import VesselCard from "./VesselCard";
function OveriewFleet() {
  const vessels = useSelector((state) => state.vessels);
  const dispatch = useDispatch();
  useEffect(() => {
    fetchVessels()(dispatch);
  }, [dispatch]);
  return (
    <div className="fleet-overview">
      <div className="fleet-overview-container">
        <span className="fleet-overview-heading-title">Fleet overview :</span>
        <div className="fleet-overview-cards">
          {vessels.map((vessel) => ({ vessel.name }))}
        </div>
      </div>
    </div>
  );
}

export default OveriewFleet;

Answer 1

看起来您在 vessels 中有 object，名称为 vessels。

试试 vessels?.vessels?.map

{vessels?.vessels?.map((vessel) => ({ vessel.name }))}

Reactjs 映射到 redux 存储

Reactjs map over redux store

reactjs

react-redux