地图方法仅显示列表中的一项

Question

我创建了一个 React 应用程序，我在后端使用 .Net Core，已成功接收到来自后端的数据列表，但在使用 Map 时，它只显示 list.I 中的一项ma 使用 MObX 进行状态管理。

我的密码是：

import React, { useContext, useEffect } from 'react'
import { RootStoreContext } from '../../app/stores/rootStore';
import { observer } from 'mobx-react-lite';
import { Segment, Item, Icon, Button } from 'semantic-ui-react';
import { format } from 'date-fns';
import { Link } from 'react-router-dom';

const BookList: React.FC = () => {
    const rootStore = useContext(RootStoreContext);
    const { loadBooks, getAvailableBooks } = rootStore.bookStore;

    useEffect(() => {
        loadBooks();
    }, [loadBooks]);

    return (
        <div>
            {getAvailableBooks.map(books => (
                <Segment.Group key={books.bookName}>
                    <Segment>
                        <Item.Group>
                            <Item>
                                <Item.Image size='tiny' circular src='/assets/user.png' />
                                <Item.Content>
                                    <Item.Header as='a'>{books.bookName}</Item.Header>
                                </Item.Content>
                            </Item>
                        </Item.Group>
                    </Segment>
</Segment.Group>
 ))}

</div>
    )
}

export default observer(BookList);

我的书店是：

import { observable, action, computed, runInAction } from "mobx";
import agent from "../api/agent";
import { RootStore } from "./rootStore";
import { IBooks } from "../models/books";

export default class BookStore {
  rootStore: RootStore;
  constructor(rootStore: RootStore) {
    this.rootStore = rootStore;
  }

  @observable bookRegistry = new Map();
  @observable book: IBooks | null = null;
  @observable loadingInitial = false;

  @computed get getAvailableBooks() {
    return Array.from(this.bookRegistry.values());
  }

  @action loadBooks = async () => {
    this.loadingInitial = true;
    try {
      const books = await agent.Books.list();
      runInAction("loading books", () => {
        books.forEach((books) => {
          books.issuedOn = new Date(books.issuedOn);
          this.bookRegistry.set(books.id, books);
        });
        this.loadingInitial = false;
      });
    } catch (error) {
      runInAction("load books error", () => {
        this.loadingInitial = false;
      });
    }
  };
}

和 API 是从 agent.ts

调用的

import axios, { AxiosResponse } from "axios";
import { history } from "../..";
import { toast } from "react-toastify";
import { IBooks } from "../models/books";

axios.defaults.baseURL = "https://localhost:44396/api";

const requests = {
  get: (url: string) => axios.get(url).then(sleep(1000)).then(responseBody),
  post: (url: string, body: {}) =>
    axios.post(url, body).then(sleep(1000)).then(responseBody),
  put: (url: string, body: {}) =>
    axios.put(url, body).then(sleep(1000)).then(responseBody),
  del: (url: string) => axios.delete(url).then(sleep(1000)).then(responseBody),
};

const Books = {
  list: (): Promise<IBooks[]> => requests.get("/Book/GetBookList"),
};


export default {
  User
};

export interface IBooks {
  id: number;
  bookname: string;
  issuedOn: Date;
  isReturned: boolean;
  isRequested: boolean;
  isAvailable: boolean;
  isTaken: boolean;
  name: string;
}

来自API的回应

Answer 1

从您 API 回复的屏幕截图来看，似乎每个“书”对象都没有 id 属性。这或许可以解释为什么您只看到一个元素被渲染，因为在您的 loadBooks 操作中，每次您尝试执行 this.bookRegistry.set(books.id, books) 时，您都使用 undefined 作为键，然后在下一次迭代您将覆盖存储在该键中的值。

地图方法仅显示列表中的一项

Map method is only showing one item from the list

javascript

ecmascript-6

reactjs

tsx

axios