Материал-UI + React: Почему не работает <Table/> onRowSelection для выбора All?

Question

Использование Material-UI's <Table/> (http://www.material-ui.com/#/components/table) с ReactJS, у меня есть таблица, настроенная с помощью флажка «Выбрать все». Каждый раз, когда флажок для строки кликается по отдельности, идентификатор строки добавляется к массиву состояний clickedRowIds. Итак, console.log(), печатает массив с идентификаторами щелчка по строке/с.

Например, если бы я должен был установить флажки только для первой строки и второй, журнал консоли должен был бы печатать: ____THESE ARE THE CLICKED ROWS____ [1, 2] (с 1 и 2, представляющими номера строк в целых числах). Но когда я нажимаю на флажок «Выбрать все» в заголовке, он проверяет все флажки в таблице, но в console.log() он показывает только ____THESE ARE THE CLICKED ROWS____ all и ids.forEach() получает ошибку Uncaught TypeError: ids.forEach is not a function.

Флажки на строках доступны на флажке «Выбрать все», но почему не все номера идентификаторов строк добавляются в массив clickedRowIds? Используя ids.forEach(), я хочу, чтобы консоль регистрировала все выбранные строки с помощью кнопки «Выбрать все».

export default class TestTable extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     clickedRowIds: [], 
    } 

    this.handleRowSelection = this.handleRowSelection.bind(this); 
    } 

    handleRowSelection(rowIds) { 
    this.setState({ 
     clickedRowIds: rowIds 
    }) 
    } 

    render(){ 
    const ids = this.state.clickedRowIds 
    console.log('____THESE ARE THE CLICKED ROWS____ ', ids) 

    ids.forEach(id => {console.log(id)}) 

    return(

     <div className='table_body' style={styles.content}> 
     <Table 
      multiSelectable={true} 
      onRowSelection={this.handleRowSelection} 
     > 
      <TableHeader 
      displaySelectAll={true} 
      enableSelectAll={true} 
      > 
       ... 
      </TableHeader> 
     </Table> 
     </div> 
    ) 
    } 
} 

Ответ будет поддержан и дан ответ.

Answer 1

Проверьте документы здесь: http://www.material-ui.com/#/components/table

Вызывается при выборе строки. selectedRows - это массив всех строк . Если выбраны все строки, строка «all» будет возвращена , чтобы указать, что все строки были выбраны.

Это означает, что если все строки выбраны, досадно, ваши rowIds больше не будут установлены в массив, а строка, обозначающая «все». Вам понадобится некоторая логика для обработки этого случая, прежде чем вызывать forEach на rowIds. Ваша ошибка связана с тем, что строка «все» не имеет метода forEach.