Как получить доступ к «родительскому» индексу функции map() внутри «дочерней» карты()
У меня есть массив массивов дат. Мне нужно сделать календарную таблицу этих дат. Каждая ячейка представляет собой компонент без состояния с двумя кнопками, каждая из которых будет иметь функцию обратного вызова, изменяющую данные, соответствующие заданной дате.
Таблица создается путем сопоставления «родительского» массива, состоящего из массивов дней (каждый «дочерний массив» имеет длину> = 6 для того, чтобы быть календарем), а затем сопоставляется каждый дочерний массив, создавая таким образом строки.
Но поскольку каждая строка таблицы создается путем сопоставления отдельного массива, как мне отслеживать количество ячеек в целом? Я хочу, чтобы каждая ячейка имела уникальный индекс, несмотря на то, что она сделана отдельной картой().
Почему я хочу этого? Поскольку при нажатии кнопки внутри каждой ячейки необходимо изменить некоторые данные, соответствующие дате, которую представляет ячейка.
Я попытался сопоставить массив дат (который используется для создания массива массивов) с объектом, чтобы иметь легкий доступ к каждой дате с помощью методов обратного вызова.
Я попробовал некоторые арифметические операции над методами «родительский» и «дочерний» map(), но я думаю, что индексная поддержка не наследуется
Я даже пытался создать массив с датами в качестве пользовательских ключей, каждый элемент которого представляет собой массив из двух элементов (это данные, с которыми мне нужно работать через эти обратные вызовы)
Пример массива массива дат
let arrayOfWeeks = [
[
"01.05.2019",
"02.05.2019",
"03.05.2019",
"04.05.2019",
"05.05.2019",
"06.05.2019",
"07.05.2019",
],
[
"08.05.2019",
"09.05.2019",
"10.05.2019",
"11.05.2019",
"12.05.2019",
"13.05.2019",
"14.05.2019",
]
]
Календарный стол
<tbody>
{arrayOfWeeks.map((row, index) =>
<tr key = {index}>
{row.map((date, index) =>
<CalendarCell key = {index} date = {date} index = {index} callback = {() => this.onCallback(someProps)} />
)}
</tr>
)}
</tbody>
Компонент без сохранения состояния CalendarCell
const CalendarCell = (props: any) => (
<td>
<Row>
<Col>
{props.date}
</Col>
</Row>
<Row>
<Col>
<Button onClick = {props.onCallback}>1</Button>
<Button onClick = {props.onCallback}>2</Button>
</Col>
</Row>
</td>
)
Я хочу, чтобы каждый компонент CalendarCell имел уникальный ключ/индекс/идентификатор/что угодно, чтобы через них можно было получить доступ к массиву в родительском компоненте.
Обновлено: Спасибо Мишель!
Вот как выглядит фиксированный код
<tbody>
{arrayOfWeeks.map((row, index) =>
<tr key = {index}>
{row.map((date, index2) =>
<CallendarCell key = {index} date = {date} index = {index * 7 + index2} onCallback = {this.onCallback} />
)}
</tr>
)}
</tbody>
Поскольку у индексов есть два уникальных имени, можно выполнить некоторые математические операции.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
использовать разные имена для index. что-то типа:
<tbody>
{arrayOfWeeks.map((row, index) =>
<tr key = {index}>
{row.map((date, index2) =>
<CalendarCell key = {index} date = {date} index = {index}
callback = {() => this.onCallback(someProps)} />
)}
</tr>
)}
</tbody>
В основном:
когда у вас есть две функции, вложенные друг в друга, вы можете сделать это:
const A = (a)=>{
const b = (b)=>{
console.info('A:',a)
console.info('B:',b)
}
b(2);
}
a('1');
//output will be:
// A:1
// B:2
Если это для вас непонятно или у вас есть вопросы, дайте мне знать