Перебор массива объектов

Question

С сервера и с формы приходит вот такой массив:

Нужно его перебрать ключ значение в этой компоненте:

import React from "react";
import { connect } from 'react-redux';

import User from "./Users";

const UsersInfo = ({usersData}) => {
    return (
        <div>
            {usersData.map((el, i) => {return(<User {...el} key={i}/>)})}
        </div>
    )
}

const mapStateToProps = (state) => {
    console.log() 
  return {
      usersData: state.GetData.users.data
  };
};

export default connect(mapStateToProps)(UsersInfo);

Но при переходе на эту компоненту ошибка TypeError: Cannot read property 'map' of undefined Ключи в массивах одинаковые

Answer 1

Ответ с сервера не означает, что компонент получил нужные элементы.

Здесь стоит обратить внимание на 3 момента:

Начальное состояние 'state'.
Правильность записи данных в состояние.
Правильность обращения к элементам в состоянии для извлечения необходимых данных.

В начале запуска скрипта необходимый элемент может быть еще не инициализирован и соответственно его значение будет undefined. Тогда при извлечении свойства будет получено исключение или значение undefined.

Чтобы этого избежать, можно заранее объявить значение элемента в дереве состояний нужным пустым значением (например, пустой массив).

{GetData: {users: []}}

Второй способ, это выполнять проверку в компоненте на неопределенность значения или соответствие типа (Array.isArray(usersData)).

usersData && usersData.map((el, i) => {return(<User {...el} key={i}/>)})

Третий способ, это использовать проверку типа с помощью PropTypes https://ru.reactjs.org/docs/typechecking-with-proptypes.html и задание значение по умолчанию https://ru.reactjs.org/docs/react-component.html#defaultprops

Answer 2

Все проще чем оказалось, проблемма в переборе значений в компоненте UsersInfo.

import React from "react";
import { connect } from 'react-redux';

import User from "./Users";

const UsersInfo = ({usersData}) => {
    return (
        <div>
          {usersData && usersData.map((el) => (el.data).map((el, i) => {return <User name={el.name} avatar={el.avatar} username={el.username} key={i}/>  }))}
        </div>
    )
}

const mapStateToProps = (state) => {
  return {
      usersData: state.GetData.users.data
  };
};

export default connect(mapStateToProps)(UsersInfo);

usersData имеет много вложенностей примерно так:

const someArr = [
    {
        data: [ {
            name: "",
            username: "",
            avatar: ""
        }
        ]  
}]

Если есть способ упростить перебор такого массива пишите

БЛОГ НА HUSL

Перебор массива объектов

Ответы (2 шт):