Почему выбор строки из antd-реагирует на выбор всех строк, когда я щелкаю только одну строку в моей таблице? - PullRequest
0 голосов
/ 15 марта 2020

У меня есть таблица, построенная с помощью команды antd. Я получаю данные от конечной точки API. Все остальное работает отлично. Но когда я щелкаю одну строку в таблице, все строки выбираются. Выбор строки работает нормально с постоянными данными документации antd. Но когда я подключаю его к своему коду с помощью динамического рендеринга данных c, он просто сходит с ума и выбирает каждую строку, когда я нажимаю только на одну строку. Вот мое состояние:

class TabularView extends React.Component {

   intervalID;


   state = {
        selectedRowKeys: [], 
        loading: false,
        data: [],
        columns : [],
        length : '',
        approve : '',
        perc : '',
        icon : <ArrowUpOutlined/>,
        color : '',
        visible: false

         }

Вот мои другие функции для выбора строки

 start = () => {
this.setState({ loading: true });
 setTimeout(() => {
  this.setState({
    selectedRowKeys: [],
    loading: false,
   });
   }, 1000);
   }

  onSelectChange = selectedRowKeys => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
 }

А вот моя часть рендера для выбора строки

render(){
 const { loading, selectedRowKeys } = this.state;
const rowSelection = {
  selectedRowKeys,
  onChange: this.onSelectChange,
};
 return(
 <Table rowSelection={rowSelection} columns={this.state.columns} dataSource={this.state.data} pagination={{ pageSize: 20 }} />
 )}

1 Ответ

1 голос
/ 16 марта 2020

Используйте уникальную ключевую опору для каждого ребенка, чтобы избежать подобных проблем

Каждый реактивный щит или любая функция карты, которую вы используете. Если вы не предоставите уникальный ключ к нему. Это выдаст предупреждение.

Реактивно всегда понимайте, что это дети по ключевой опоре. Так как все ключи к столу одинаковы. Когда вы выбираете одну строку, так как ключ один и тот же, он выбирает всю строку. Ключевая опора в реакции очень полезна для динамического программирования c с использованием функции карты. Пожалуйста, прочитайте это для более ясного объяснения - React Key Prop

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...