ReactJS, у меня есть один ключ, который не является уникальным, как сделать его только одним ключом на строку?
Проблема заключается в наличии повторяющегося ключа из-за 2 индексов в поле данных JSON. Всего имеется 58 проблем, однако есть 59 строк из-за одной проблемы с двумя индексами, которая создает новую строку с повторяющимся значением ключа, равным 33, как показано на изображении.
{this.state.acceptedTickets && this.state.acceptedTickets.issues && Object.keys(this.state.acceptedTickets.issues).map((issue, i) =>
(
this.state.acceptedTickets && this.state.acceptedTickets.issues && this.state.acceptedTickets.issues[i].fields.customfield_11400 && Object.keys(this.state.acceptedTickets.issues[i].fields.customfield_11400).map((clientName, clientName_index)=>
<td key = {i}>
{i + " "}
{
this.state.acceptedTickets.issues[i].fields.customfield_11400[clientName_index].value
}
</td>
)
))}
Даже если я добавлю i +1, он будет отображать от 1 до 58 вместо 0 до 57
Ответы 1
Похоже, вы выполняете итерацию по массиву массивов и просто используете индекс во внешнем массиве в качестве ключа, который не будет уникальным, если внутренний массив имеет длину> 1.
Вместо этого попробуйте: key = { $ {i} - $ {clientName_index} }
Ключ просто должен быть уникальной строкой.
{this.state.acceptedTickets && this.state.acceptedTickets.issues && Object.keys(this.state.acceptedTickets.issues).map((issue, i) =>
(
this.state.acceptedTickets && this.state.acceptedTickets.issues && this.state.acceptedTickets.issues[i].fields.customfield_11400 && Object.keys(this.state.acceptedTickets.issues[i].fields.customfield_11400).map((clientName, clientName_index)=>
<td key = {`${i}-${clientName_index}`}>
{i + " "}
{
this.state.acceptedTickets.issues[i].fields.customfield_11400[clientName_index].value
}
</td>
)
))}
Кажется, все еще печатается 59 значений вместо 58 :(
Длина внешнего массива 58, а длина одного из внутренних массивов равна 2, а у других - 1? Тогда становится понятным, почему вы визуализируете 59 элементов - вы выполняете .map() внутреннего массива внутри .map() внешнего массива, поэтому вы получаете общее количество элементов во всех внутренних массивах: 57 * 1 + 1 * 2
Да, точно, внешний массив имеет длину 58, внутренний массив имеет длину 1, за исключением того, что ключ 33 с длиной 2, я хочу поместить все значения ключа 33 в одну строку
Таким образом, это будет выглядеть так: Air Canada, Air canada rouge в одной строке, поэтому у меня будет 58 строк вместо 59: /
Затем вам нужно переместить внутренний .map() внутрь <td>, и в итоге вы поместите содержимое внутреннего массива в один <td>.
Я попытался поместить внутренний .map () внутрь td, но он продолжает давать мне ошибку
Не могли бы вы привести пример и как это сделать с правильным синтаксисом
`` `<td key = {${i}-${clientName_index}}> {Object.keys (.... customfield_11400) .map ((clientName_index) => ... customfield_11400 [clientName_index] .value) .join (',')} </ тд> ``
Дело в том, что должно быть 58 строк, а не 59 строк.