Javascript Не удается прочитать второй элемент массива, который является массивом
Я пытаюсь получить доступ ко всем элементам моего массива, кроме первого, но получаю пустые значения.
renderTableBody = thisService => {
console.info(thisService); // in the image it's the printed array
console.info(thisService.length); // in the image is the number 1
return thisService.slice(1).map(item =>
item.map(k => (
<TableRow key = {k.kpiId}>
<TableCell align = "left" component = "th" scope = "row">
{k.kpiId}
</TableCell>
<TableCell align = "left">{k.kpiName}</TableCell>
<TableCell align = "left">{k.targetDisplay}</TableCell>
<TableCell align = "left">{k.targetDisplay}</TableCell>
<TableCell align = "left">{k.reason}</TableCell>
<TableCell align = "left">{k.action}</TableCell>
<TableCell align = "left">{k.dueDate}</TableCell>
<TableCell align = "left">{k.owner}</TableCell>
</TableRow>
))
);
};
Когда я регистрирую длину массива, он печатает 1, когда на самом деле имеет 2 элемента. Когда я пытаюсь получить доступ только ко второму элементу массива, я получаю «неопределенное».
Это зарегистрированный объект консоли:
Я делаю что-то неправильно при доступе ко второму элементу моего массива, который сам является массивом?
РЕДАКТИРОВАТЬ Часть кода, где я вызываю функцию renderTableBody:
<div id = "servicesInputs">
{kpiServInputs.map((service) => (
<div key = {service[0].id} id = {service[0].id}>
<div align = "left">
<h4>{service[0].serviceName}</h4>
</div>
<div>
<Paper >
<Table>
<TableHead>
<TableRow>
<TableCell align = "left">#</TableCell>
<TableCell align = "left">KPI</TableCell>
<TableCell align = "left">Target</TableCell>
<TableCell align = "left">Actual</TableCell>
<TableCell align = "left">Reason</TableCell>
<TableCell align = "left">Action</TableCell>
<TableCell align = "left">Due Date</TableCell>
<TableCell align = "left">Owner</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.renderTableBody(service)}
</TableBody>
</Table>
</Paper>
<br/>
</div>
</div>
))}
</div>
Я предполагаю, что массив заполняется асинхронно?
Используйте console.info(JSON.stringify(thisService)). Если вы наведете курсор на этот значок i в синем поле, вы обнаружите, что он показывает самое последнее значение переменной, а не значение на момент ее регистрации.
Что показывает значок «i» рядом с массивом console.info? почти уверен, что есть разница между массивом виртуальной DOM React и загруженной в фактическую DOM
@pmiranda говорит: «Значение ниже было оценено только что»
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
renderTableBody = thisService => {
console.info(thisService); // in the image it's the printed array
console.info(thisService.length); // in the image is the number 1
return thisService[1].map(item =>
item.map(k => (
<TableRow key = {k.kpiId}>
<TableCell align = "left" component = "th" scope = "row">
{k.kpiId}
</TableCell>
<TableCell align = "left">{k.kpiName}</TableCell>
<TableCell align = "left">{k.targetDisplay}</TableCell>
<TableCell align = "left">{k.targetDisplay}</TableCell>
<TableCell align = "left">{k.reason}</TableCell>
<TableCell align = "left">{k.action}</TableCell>
<TableCell align = "left">{k.dueDate}</TableCell>
<TableCell align = "left">{k.owner}</TableCell>
</TableRow>
))
);
};
Это должен быть ваш код, потому что, как указал @Dupocas, thisService — это массив, который выглядит как [{Object}, [Array]].
Когда вы запускаете slice для этого и map для результата, вы пытаетесь отобразить внешний массив чего-то вроде [['stuff you need']]. Этот внешний массив имеет длину 1 и будет действовать точно так же, как вы его видите. Изменив slice для прямого доступа к первому индексу thisService, вы будете циклически просматривать необходимую информацию.
Я получаю сообщение «Uncaught TypeError: невозможно прочитать карту свойств неопределенного». Он не распознает второй элемент внешнего массива
Только что заметил, что у вас есть 3 журнала консоли в образе. Что такое первое: (5) [Array]... и второе: [{...}], так как в вашем коде всего 2 console.info
массив thisService является элементом другого массива, который вы видите зарегистрированным (5) [Array]
так thisService == [{...}]? Или спросите немного лучше: thisService — это массив с одним JS-объектом внутри?
Это объект, который вы видите на картинке, которую я увеличил. Он имеет один объект json и другой массив элементов.
thisService.slice(1) для массива длины 1 вернет пустой массив.
Давайте продолжить обсуждение в чате.
Проблема заключалась в том, что массив заполнялся асинхронно с выполнением fetch вызова api. Что сработало для меня, так это сделать возврат асинхронным и дождаться завершения вызова fetch, а затем заполнить массив.
Код:
function fetchKpiServicesInputs(state) {
let serviceInputs = [];
return async dispatch => {
for (var i = 0; i < servicesCount; i++) {
let newServ = [];
newServ.push({id: i, serviceName: kpiServices[i].name });
let url = "apiUrl";
const response = await fetch(url, {
method: 'GET'
});
const responseData = await response.json();
if (Object.keys(responseData).length > 0) {
newServ.push(responseData);
}
serviceInputs.push(newServ);
}
dispatch(receiveKpiServiceInputs(serviceInputs));
};
Спасибо всем за помощь!
Вы только пытаетесь распечатать значения из массива, найденного в
thisService[1]?