Событие onClick - изменение данных для одной строки в таблице реагирования

Question

У меня есть столбец в моей таблице реагирования, который использует переменную (именованный элемент) для отображения своих данных. Как показано в коде ниже:

{
  Header: this.generateHeaderCell(this.props.headers[3]),
  accessor: 'last_updated_status',
  Cell: (props: any) => <DateSinceFormat date={props.value} item={item}/>,
  maxWidth: 85,
  filterable: false
}

Поэтому, когда значение переменной item равно 1, оно отображает некоторые данные, а когда оно изменяется, оно отображает что-то еще.

Я использую событие onClick для изменения значения элемента.

onRowClick = (state, rowInfo, column, instance) => {
    return {
        onClick: e => {
            if(item === '2') {
                item = '1';
            } else {
                item = '2';
            }
            instance.forceUpdate();
        }
    };
}

Проблема, с которой я здесь сталкиваюсь, заключается в том, что я хочу обновить значение только для определенной строки, по которой щелкает пользователь, однако сейчас все строки обновляются.

Пожалуйста, помогите мне здесь и дайте мне знать, как решить эту проблему.

Answer 1

Похоже, значение для item распределяется между всеми строками. Вы можете попробовать добавить item собственность на rowInfo (Я предполагаю, что это объект), и изменить onClick() функция к

onClick: e => {
         if(rowInfo.item === '2') 
         {
             rowInfo.item = '1';
         } 
         else 
         {
             rowInfo.item = '2';
         }
   instance.forceUpdate();
}