удалить идентификатор в массиве при выборе - отменить выбор

#reactjs #redux #react-redux

#reactjs #redux #реагировать-redux

Вопрос:

Я ищу способ, чтобы при невыбранной строке удалить число в массиве.

при выборе> идентификатор: [2, 7, 8]

==> Проблема, когда я отменил выбор одного элемента: пример с идентификатором 8 :

при невыбранном> идентификатор: [2, 7, 8]

идентификатор 8 остается в моем массиве.

==> Проблема, когда я отменяю выбор одного элемента и нажимаю снова :

идентификатор : [2, 7, 8, 8]

 constructor(props) {
    super(props);
    this.state = {
        id: [],
    };
    this.onRowSelect = this.onRowSelect.bind(this);
    this.onSelectAll = this.onSelectAll.bind(this);
}

onRowSelect(row, isSelected, e) {
    let rowStr = '';
    for (const prop in row) {
        rowStr  = prop   ': "'   row[prop]   '"';
        if (isSelected == true){
            this.setState({ id: [...this.state.id, row.id] })
        }
    }
    console.log(`is selected: ${isSelected}, ${rowStr}`);
}

Ответ №1:

Вы должны использовать функцию map (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map ):

 onSelectAll(isSelected, rows) {
    console.log(`is select all: ${isSelected}`);
    if (isSelected) {
        console.log('Current display and selected data: ');
        this.setState({ id: [...this.state.id, ...rows.map(x=>x.id)] })
    } else {
        console.log('unselect rows: ');
        const ids = this.state.id.reduce((acc,id)=>{
            return rows.find(x=>x.id === id) ? acc : [...acc,id]
        },[])
        this.setState({ id: [...ids] })
    }
}

1. Спасибо, я постараюсь сделать, как и раньше, удалить данные из идентификатора при отмене выбора.

2. Я редактирую с помощью кода сокращения, чтобы отменить выбор идентификатора всех строк 😉

Ответ №2:

Когда значение isSelect равно false, вы должны установить в своем состоянии свой массив без выбранного идентификатора строки. функция фильтра сделает это за вас.

     onRowSelect(row, isSelected, e) {
      let rowStr = '';
      for (const prop in row) {
        rowStr  = prop   ': "'   row[prop]   '"';
        if (isSelected == true){
          this.setState({ id: [...this.state.id, row.id] })
        }else{
          this.setState({ id: [...this.state.id.filter(x=>x!==row.id)] })
        }
      }
      console.log(`is selected: ${isSelected}, ${rowStr}`);
    }

Ответ №3:

Когда я использую

this.setState({ id: […this.state.id , строки[i].идентификатор] })

он извлекает только последний идентификатор раздела

 onSelectAll(isSelected, rows) {
        console.log(`is select all: ${isSelected}`);
        if (isSelected) {
            console.log('Current display and selected data: ');
        } else {
            console.log('unselect rows: ');
        }
        for (let i = 0; i < rows.length; i  ) {
            console.log(rows[i].id);
            this.setState({ id: [...this.state.id, rows[i].id] })
        }
    }