Uncaught TypeError: Невозможно прочитать свойство map из undefined в реакции

Question

Я использую ReactJ и помещаю карту в карту, но получаю эту ошибку в строке, где я использую функцию карты в c.children

{c.description} работает нормально.Но я не могу отобразить c.children.

JSON:

Ссылка: http://prntscr.com/l68aqt

apiData: http://prntscr.com/l68dyk

Код:

<div className="side-tab">
              { apiData !== false &&
              apiData.data.map(((c) => (<div>
                {c.description}
                {
                  c.childrens.map(i => (
                    <ProductTab />
                  ))
                }
              </div>)
              ))
              }
            </div>

Answer 1

Вы вызываете функцию map в неопределенном свойстве.Это означает, что c.childrens не определено.Если вы видите свои данные, некоторые элементы в apiData имеют свойство childrens, в то время как другие не имеют (у «Обучение и сертификация» и «Инструменты» его нет).Решение состоит в том, чтобы проверить, не являются ли они неопределенными перед вызовом функции карты.

Проверьте, не является ли значение c.childrens неопределенным или имеет ли оно значения:

c.childrens && c.childrens.map

или

c.childrens && c.childrens.length > 0 && c.childrens.map

Итак, ваш код будет выглядеть так:

<div className="side-tab">
    {apiData !== false &&
        apiData.data.map(((c) => (<div>
            {c.description}
            {
             c.childrens && c.childrens.length > 0 && c.childrens.map(i => (
                <ProductTab />
              ))
            }
          </div>)
          ))
          }
        </div>

Answer 2

Попробуйте это:

  <div className="side-tab">
    {apiData && apiData.data && apiData.data.map(c => (
        <div>
          {c.description}
          {c.childrens && c.childrens.map(i => (
            <ProductTab />
          ))}
        </div>
      ))}
  </div>