如何从 React 中的 Observable Map 进行过滤？

Question

我有一个包含 Dropdown 的 React 组件，下拉列表有 4 个值 'requsted,all,taken,available' 并且最初加载了所有项目列表。每个项目都有 isRequested、isTaken 和 isAvailable。现在，我需要根据下拉列表过滤这些数组，但我得到了其他东西作为输出

我的 React 组件是：

import React, { useContext, useEffect, SyntheticEvent, useState } from 'react'
import { observer } from 'mobx-react-lite';
import { Dropdown, Segment, Item, Icon, Label, Button, Select } from 'semantic-ui-react';
import { BooksStatus } from '../../app/common/options/BookStatus';
import { RootStoreContext } from '../../app/stores/rootStore';
import { format } from 'date-fns';
import { NavLink } from 'react-router-dom';
import { id } from 'date-fns/esm/locale';



const LibrarianManager: React.FC = () => {

    const rootStore = useContext(RootStoreContext);
    const { loadBooks, getAvailableBooks, deleteBook } = rootStore.bookStore;

    const [status, setStatus] = useState(BooksStatus[0].value);

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

    const onChange = (value: any) => {
        setStatus(value)
        console.log(value)

        if (value === 'requested') {
              if (value === 'requested') {
            getAvailableBooks.filter(data => data.isRequested == true)
            console.log(getAvailableBooks)
        }
        }
    }

    return (
        <div>
           
            <Select
                value={status}
                onChange={(e, data) => onChange(data.value)}
                options={BooksStatus}
            />

            {getAvailableBooks.map(books => (
                <Segment.Group key={books.bookName}>
                    <Segment>
                        <Item.Group>
                            <Item>
                                <Item.Image size='tiny' circular src='/assets/books.jpg' />
                                <Item.Content>
                                    <Item.Header as={NavLink} to={`/booksDetail/${books.id}`} >{books.bookName}</Item.Header>                               
                                </Item.Content>
                            </Item>
                        </Item.Group>
                    </Segment>
                   
                    <Segment clearing>
                        <span></span>
                    </Segment>
                </Segment.Group>
            ))}
        </div>
    )
}

export default observer(LibrarianManager);

我的地图函数是：-

  @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;
      });
    }
  };

我的数据模型或项目是

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

尝试使用此方法时

if (value === 'requested') {
              if (value === 'requested') {
            getAvailableBooks.filter(data => data.isRequested == true)
            console.log(getAvailableBooks)
        }

在控制台中，我在没有过滤的情况下获取所有列表

Answer 1

Array.filter 不会改变原始数组，但 returns 一个新的很好 (MDN)。

你想要的是：

const filteredBooks = getAvailableBooks.filter(data => data.isRequested == true)
console.log(filteredBooks)

如何从 React 中的 Observable Map 进行过滤？

How to filter from Observable Map in React?

javascript

reactjs

mobx

mobx-react