Reactjs 反应：删除目标表行始终会删除第一行

我有一个组件，它根据搜索框中输入的术语筛选公司，然后根据其帐户是否被激活再次筛选公司，然后将其映射到包含多个公司数据列的表中。每个公司的最后一个表格列包含多个按钮，其中一个按钮是触发模式对话框的删除按钮，然后必须从模式对话框中确认或取消删除

为简洁起见，我将省略不重要的导入和导出：

import {searchingFor} from '../../../containers/CompaniesContainer/CompaniesContainer';
const companiesTable = (props) => {
  return (
    <table className={classes.Table}>
      <thead>
        <tr>
          <th className={classes.First}>&nbsp;</th>
          <th onClick={props.sortByName} className={[classes.Second, props.sortingClass].join(' ')}><span>Name</span><img src={downArrow} alt="down-arrow" /></th>
          <th onClick={props.sortByAddress} className={[classes.Third, props.sortingClass].join(' ')}><span>Email address</span><img src={downArrow} alt="down-arrow" /></th>
          <th onClick={props.sortByAdded} className={[classes.Fourth, props.sortingClass].join(' ')}><span>Added</span><img src={downArrow} alt="down-arrow" /></th>
          <th className={classes.Last}>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        {
          props.companies.filter(searchingFor(props.term)).filter(function (company) {
            if(props.isActive === true) {
              return company.active;
            } else {
              return !company.active
            }
          }).map((item, index) =>
            <tr key={item.id}>
              <td>
                <img src={companyImg} alt="companies" />
              </td>
              <td>{item.name}</td>
              <td>{item.street},<br/>{item.city}</td>
              <td>{item.added}</td>
              <td>
                <Button btnType={props.btnClass1} onClick={() => props.deleteInitiate(item.name)}>{props.btnText1}</Button>
                <Button btnType={props.btnClass2}>{props.btnText2}</Button>
                <Button btnType={props.btnClass3}>{props.btnText3}</Button>
              </td>
            </tr>
          )
        }
      </tbody>
    </table>
  );
};

export default companiesTable;

最后，一个

DeleteCompany

组件安装到

Modal

组件中，该组件包含取消和删除按钮：

const deleteCompany = (props) => {
  return (
    <React.Fragment>
      <h3 className={classes.ModalTitle}>Confirm deletion</h3>
      <p className={classes.ModalText}>Are you sure you want to delete the company of <strong>{props.name}</strong></p>
      <ul className={classes.ModalButtonsList}>
        <li className={classes.ModalButtonsListItem}>
          <Button btnType='primary' onClick={props.deleteCancel}>Cancel</Button>
        </li>
        <li className={classes.ModalButtonsListItem}>
          <Button btnType='danger' onClick={props.delete}>Delete</Button>
        </li>
      </ul>
    </React.Fragment>
  );
};

constdeleteCompany=（道具）=>{
返回(
确认删除
是否确实要删除{props.name}


取消


删除


);
};

---

我的问题是，当我单击特定公司行的删除按钮并通过单击模式中的删除按钮确认删除该行时，错误的行被删除。出于某种原因，无论我试图删除哪一行，它总是删除第一个表行。有人能帮我找出发生这种情况的原因吗？

这是因为从

DeleteCompany

组件中，您没有在

delete

方法（在CompanyContainer中定义为deleteHandler）中传递任何索引，这里：

---

我必须将'el=>el.name==prevState.deletingCompanyName'更改为'el=>el.name！==prevState.deletingCompanyName'，但它有效。谢谢。我会尽量传递id而不是公司名称。

const companies = (props) => {
  return (
    <React.Fragment>
      <CompaniesTabs
        term={props.term}
        companies={props.companies}
        sortByName={props.sortByName}
        sortByAddress={props.sortByAddress}
        sortByAdded={props.sortByAdded}
        sortingClass={props.sortingClass}
        toggleSortingClass={props.toggleSortingClass}
        deleteInitiate={props.deleteInitiate}
      />
    </React.Fragment>
  );
};

export function searchingFor(term) {
  return function(x) {
    return x.name.toLowerCase().includes(term.toLowerCase()) || !term;
  }
}

class CompaniesContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      term: '',
      sorting: false,
      deleting: false,
      deletingCompanyName: null,
      companies: [
        { 
          id: 1,
          name: "Company 1",
          street: "123 Some Street",
          city: "London",
          added: "03.04.19",
          active: true,
        },
        { 
          id: 2,
          name: "Company 2",
          street: "321 Some other Street",
          city: "New York",
          added: "04.04.19",
          active: false,
        }
      ]
    }
    this.compareBy.bind(this);
    this.sortBy.bind(this);
    this.toggleSortingClass= this.toggleSortingClass.bind(this);
    this.searchHandler = this.searchHandler.bind(this);
    this.deleteInitiateHandler = this.deleteInitiateHandler.bind(this);
  }

  compareBy(key) {
    return function (a, b) {
      if (a[key] < b[key]) return -1;
      if (a[key] > b[key]) return 1;
      return 0;
    };
  }

  sortBy(key) {
    let arrayCopy = [...this.state.companies];
    arrayCopy.sort(this.compareBy(key));
    this.setState({companies: arrayCopy});
  }

  toggleSortingClass() {

  };

  searchHandler(event){
    this.setState({term: event.target.value});
  }

  deleteInitiateHandler = (name) => {
    this.setState({deleting: true, deletingCompanyName: name});
  }

  deleteHandler = (companyIndex) => {
    const companies = [...this.state.companies];
    companies.splice(companyIndex, 1);
    this.setState({companies: companies, deleting: false});
  };

  deleteCancelHandler = () => {
    this.setState({deleting: false});
  }

  render() { 
    const {term, companies} = this.state;

    return (
      <React.Fragment>
        <Modal 
          show={this.state.deleting} 
          modalClosed={this.deleteCancelHandler} 
        >
          <DeleteCompany 
            delete={this.deleteHandler} 
            deleteCancel={this.deleteCancelHandler}
          />
        </Modal>
        <SearchBox 
          change={this.searchHandler} 
          value={term} 
          placeholder="Search Companies…" 
        />       
        <Companies 
          term={term}
          companies={companies}
          sortByName={() => this.sortBy('name')}
          sortByAddress={() => this.sortBy('city')}
          sortByAdded={() => this.sortBy('id')}
          sortingClass={this.state.sorting}
          toggleSortingClass={this.toggleSortingClass}
          deleteInitiate={this.deleteInitiateHandler}
        />             
      </React.Fragment>
    );
  }
};
export default CompaniesContainer;

const deleteCompany = (props) => {
  return (
    <React.Fragment>
      <h3 className={classes.ModalTitle}>Confirm deletion</h3>
      <p className={classes.ModalText}>Are you sure you want to delete the company of <strong>{props.name}</strong></p>
      <ul className={classes.ModalButtonsList}>
        <li className={classes.ModalButtonsListItem}>
          <Button btnType='primary' onClick={props.deleteCancel}>Cancel</Button>
        </li>
        <li className={classes.ModalButtonsListItem}>
          <Button btnType='danger' onClick={props.delete}>Delete</Button>
        </li>
      </ul>
    </React.Fragment>
  );
};

<Button btnType='danger' onClick={props.delete}>Delete</Button>