Map 方法仅显示列表中的一项

Question

我创建了一个 React 应用程序，我在后端使用.Net Core，成功接收到来自后端的数据列表，但是在使用 Map 时做出反应，它只显示列表中的一项。我可以使用 MObX 进行 state 管理。

我的代码是：

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 响应的屏幕截图中，似乎每个“书” object 都没有id属性。 这可能解释了为什么您只看到一个元素呈现，因为在您的loadBooks操作中，每次您尝试执行this.bookRegistry.set(books.id, books)时，您使用undefined作为键，然后在下一个迭代您会覆盖存储在该键处的值。