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

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 键，然后在下一次迭代中您覆盖存储在该键中的值。