Блог

Главная - Вопросы по программированию - Вложенная карта в одном и том же массиве удваивается при каждом рендеринге

Вложенная карта в одном и том же массиве удваивается при каждом рендеринге

#javascript #reactjs

Вопрос:

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

       <tbody>
        {this.state.clients
            .filter(x => x.clientTypeId === 2)
            .sort((a,b) => sortByField(a, b,this.state.sortOrder === 1 ? 'name' : "registrationNumber", 0) )
            .map(client => (
            <React.Fragment>
              <tr style...

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

  {this.state.clients
                          .filter(x => x.parentClientId === client.id)
                          .sort((a,b) => sortByField(a,b,this.state.sortOrder === 1 ? 'name' : "registrationNumber", 0) )
                          .map(subClient => (
                          <tr className="tableRow" onClick={() => { this.handleSelection(subClient.id); }} key={client.id}>

Проблема в том, что каждый раз, когда я меняю параметр сортировки, таблица субклиентов удваивается в размере. Кажется, это снова добавляет значения.

Весь метод:

 {!this.state.isLoading amp;amp;
              <tbody>
                {this.state.clients
                    .filter(x => x.clientTypeId === 2)
                    .sort((a,b) => sortByField(a, b,this.state.sortOrder === 1 ? 'name' : "registrationNumber", 0) )
                    .map(client => (
                    <React.Fragment>
                      <tr style={mainStyle} className="tableRow" onClick={() => { this.handleSelection(client.id); }} key={client.id}>
                        <td><strong>{client.name}</strong></td>
                        ...
                      </tr>
                      {this.state.clients
                          .filter(x => x.parentClientId === client.id)
                          .sort((a,b) => sortByField(a,b,this.state.sortOrder === 1 ? 'name' : "registrationNumber", 0) )
                          .map(subClient => (
                          <tr className="tableRow" onClick={() => { this.handleSelection(subClient.id); }} key={client.id}>
                            
                            <td>amp;nbsp;amp;nbsp;>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;{subClient.name}</td>
                            ...
                          </tr>
                      ))}                      

                    </React.Fragment>
                  ))}
              </tbody>
            }

Я не уверен, почему дочерние объекты каждый раз дублируются. Это похоже на добавление новой сопоставленной версии в таблицу. Что я делаю не так?

Комментарии:

1. Дублируются ли дочерние объекты, если вы удалите sort их ?

2. Не могли бы вы предоставить clients информацию государству?

3. Вероятно, это связано с тем, что сортировка изменяет массив на месте.

4. Если я закомментирую первый сорт и оставлю 2 — й сорт-это сработает (дети сортируются правильно и не дублируются). Но если я удалю 2 — й сорт и оставлю первый сорт-он удваивает размер таблицы при каждом рендеринге.

Ответ №1:

Нашел ошибку.

В тегах TR я использовал key={client.id} и то, и другое.

Следует использовать 2-й цикл subClient.id .

Исправив это, проблема была решена.

Метки: