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

Question

我已经创建了一个 React 应用程序，我在后端使用 .Net Core，成功接收了来自后端的数据列表，但是在使用 Map 时，它只显示列表中的一项。我使用 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());  }

Answer 1

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