如何在React Typescript中从通用数组中移除项？

Question

有人能给我演示一下如何从新创建的数组中删除对象吗？在这种情况下，“index”参数并不起作用，因为它实际上不是新创建数组的索引。

我正在onchange事件中创建新数组。

这里包含完整的代码。以防万一有人有想法。

import * as React from 'react';
import styles from './ListItems.module.scss';
import { IListItemsProps } from './IListItemsProps';
import { escape } from '@microsoft/sp-lodash-subset';
import  {DropdownBasicExample} from './DropdownExample'
import { IDropdownOption, DropdownMenuItemType } from 'office-ui-fabric-react';
import { DropdownBasicExample2 } from './Dropdown2.Basic.Example';

export interface IListItemsState{
  selectedItems:IDropdownOption[];
  selectedSite:IDropdownOption;
}

export default class ListItems extends React.Component<IListItemsProps, IListItemsState> {
  private myWeb:IDropdownOption;

  constructor(props){
    super(props);
      this.state = {
        selectedItems:[],
        selectedSite:null
      }
  }

  private sites = [
    { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
    { key: 'A', text: 'Site a', title: 'I am Site a.' },
    { key: 'B', text: 'Site b' },
    { key: 'C', text: 'Site c' },
    { key: 'D', text: 'Site d' },
    { key: 'E', text: 'Site e' },
     { key: 'F', text: 'Site f' },
    { key: 'G', text: 'Site g' },
    { key: 'H', text: 'Site h' },
    { key: 'I', text: 'Site i' },
    { key: 'J', text: 'Site j' }
  ];

  private loadSites= (): Promise<IDropdownOption[]> => {
    return new Promise<IDropdownOption[]>((resolve: (sites: IDropdownOption[]) => void, reject: (error: any) => void) => {
      setTimeout(() => {
        resolve(this.sites);
      }, 1000);
    });
  }

  private onChanged = (item: IDropdownOption, index?: number): void => {
    let mySelectedItems = [...this.state.selectedItems];

  if (item.selected) {
    mySelectedItems.push(item);
  } else {
      mySelectedItems = mySelectedItems.filter(selectedItem => selectedItem !== item);
  }

  this.setState({
    selectedItems: mySelectedItems
  });


    console.log(mySelectedItems);


  }


  public render(): React.ReactElement<IListItemsProps> {
    const {selectedSite} = this.state;
    return (
      <div className={styles.listItems}>


      <DropdownBasicExample loadOptions={this.loadSites} onChanged={this.onChanged}   />       

              <div id="showItems"></div>
              <ul>{
                this.state.selectedItems.map((site:IDropdownOption)=> {
                return <li>{site.text}</li>
              })
              }

              </ul>
              <div>selected Site {
              selectedSite ? selectedSite.key: "is empty"                
                }</div>
      </div>
    );
  }

}

下拉菜单基础示例2

import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown, IDropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

import './Dropdown.Basic.Example.scss';
import { BaseComponent, createRef, IBaseProps } from 'office-ui-fabric-react';

export interface IDropdownBasicExample2State{
    selectedItem?:  IDropdownOption;
    selectedItems: IDropdownOption[];
    options: IDropdownOption[];
}


export interface IDropdownBasicExample2Props  extends IBaseProps{
  onChanged?: (option: IDropdownOption, index?: number) => void;
  Options: IDropdownOption[];
}
export class DropdownBasicExample2 extends BaseComponent<IDropdownBasicExample2Props,IDropdownBasicExample2State> {
  private _basicDropdown = createRef<IDropdown>();
  private alphas:IDropdownOption[]; 
  private array2: Array<IDropdownOption>;
  constructor(props: IDropdownBasicExample2Props) {
    super(props);
    this.state = {
      selectedItem: null,
      selectedItems: [],
      options:[]
    };
  }

componentDidMount(){

}

  public render() {
    const { selectedItem, selectedItems } = this.state;

    return (
      <div className="docs-DropdownExample">


        <Dropdown
          placeHolder="Select options"
          label="Multi-Select controlled example:"
          selectedKey={selectedItem ? selectedItem.key : undefined}
          key={selectedItem ? selectedItem.key : undefined}
          onChanged={this.onChangeMultiSelect}
          multiSelect
          options={this.props.Options}
        />

      </div>
    );
  }

  public onChangeMultiSelect = (item: IDropdownOption,index:number): void => {

    this.props.onChanged(item,index);
  };

}

- Burre Ifort

Answer 1

您可以从数组中过滤出该项。

private onChanged = (item: IDropdownOption, index?: number): void => {
  let mySelectedItems = [...this.state.selectedItems];

  if (item.selected) {
    mySelectedItems.push(item);
  } else {
    mySelectedItems = mySelectedItems.filter(
      selectedItem => selectedItem !== item
    );
  }

  this.setState({
    selectedItems: mySelectedItems
  });
};

- Tholle

---

我使用了你的代码，但是它没有将项目从新创建的数组中删除。它们仍然在数组中。 - Burre Ifort

@BurreIfort 这很令人沮丧。你能否在你的代码中包含你的状态和如何调用 onChanged 的方式？否则很难说出问题出在哪里。 - Tholle

我将包含我整个的代码。也许这样会更容易些。 - Burre Ifort

@BurreIfort 请尝试包含一个最小、完整和可验证的示例。 - Tholle

我已经包含了它，这只是一个例子。然而，使用索引参数，我能够将它们移除，但唯一的问题是“index”返回原始数组的索引，而不是基于零的索引。因此，我试图获取数组中对象的索引。在React中这非常令人困惑。 - Burre Ifort

@BurreIfort 对不起，由于“DropdownBasicExample”是一个独立的组件，很难弄清楚发生了什么。请创建一个最小化、完整化和可验证化的示例，我们可以帮助您解决问题。 - Tholle

Answer 2

请试一下。根据属性删除项目。在这种情况下，我使用键。

 private onChanged = (item: IDropdownOption, index?: number): void => {
    let mySelectedItems = [...this.state.selectedItems];

  if (item.selected) {
    mySelectedItems.push(item);
  } else {
      mySelectedItems = mySelectedItems.filter(selectedItem => selectedItem.key !== item.key);
  }

  this.setState({
    selectedItems: mySelectedItems
  });

  }

- Imir Hoxha