Как исправить Cannot read property 'length' of undefined?

Question

[IIITRIX]

Пытаюсь сделать деплой (npm run build) с create-react-app
в дэв версии работает отлично но при сборке выдает ошибку

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined

Вот код на который ругается

{articles.length > 0 ? (
 articles.map((article, index) => {
  const content_blocks = article.content
  ? JSON.parse(article.content).blocks
  : [];
  return (
   <React.Fragment key={index}>
     <ReactPlaceholder
       showLoadingAnimation
       delay={2000}
       ready={this.props.ready}
       customPlaceholder={ArticlePlaceholder}
    >
   <SingleArticle
    article={article}
    content_blocks={content_blocks}
    article_index={index}
    subsiteDetailPageView={this.props.subsiteDetailPageView}
   />
  </ReactPlaceholder>
 </React.Fragment>
 );
 })
 ) : (
 <NoArticlesFound />
 )}

Comments

[Роман Александрович]

{articles&&articles.length> 0 ?(

[IIITRIX]

Роман Александрович,
Странно, теперь ругается на
TypeError: t.map is not a function

{popular_tags.length > 0
              ? popular_tags.map((tag, index) => {
                  return (
                    <React.Fragment key={index}>
                      <ReactPlaceholder
                        showLoadingAnimation
                        type="textRow"
                        delay={2000}
                        ready={this.state.ready}
                        style={{
                          width: "25%",
                          display: "inline-block",
                          marginRight: 10
                        }}
                        >
                        <Link
                          to={`/tag/${tag.name}`}
                          className="popular_tags_item"
                          >
                          {`#${tag.name}`}
                        </Link>
                      </ReactPlaceholder>
                    </React.Fragment>
                  );
                })
              : null}

[Роман Александрович]

IIITRIX,

{popular_tags!==undefined&&popular_tags.length > 0
              ? popular_tags.map((tag, index) => {
                  return (
                    <React.Fragment key={index}>
                      <ReactPlaceholder
                        showLoadingAnimation
                        type="textRow"
                        delay={2000}
                        ready={this.state.ready}
                        style={{
                          width: "25%",
                          display: "inline-block",
                          marginRight: 10
                        }}
                        >
                        <Link
                          to={`/tag/${tag.name}`}
                          className="popular_tags_item"
                          >
                          {`#${tag.name}`}
                        </Link>
                      </ReactPlaceholder>
                    </React.Fragment>
                  );
                })
              : null}

а так?

[IIITRIX]

Роман Александрович, Все равно TypeError: t.map is not a function

[Роман Александрович]

а покажите в консоль логе popular_tags. Я думаю у вас там у вас там обьект

[IIITRIX]

Роман Александрович, Вот консоль

[IIITRIX]

Роман Александрович,
Весь компонент

// basic imports
import React, { Component } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { FormattedMessage } from "react-intl";

// react placeholder
import ReactPlaceholder from "react-placeholder";
import "react-placeholder/lib/reactPlaceholder.css";

// reactstrap
import { Card, CardBody } from "reactstrap";

class PopularTags extends Component {
  constructor(props) {
    super(props);

    this.state = {
      popular_tags: [
        "This is",
        "just a",
        "mock data",
        "for tags.",
        "Just to",
        "show content",
        "placeholder."
      ],
      ready: false
    };
  }

  componentDidMount() {
    axios.get("/api/articles/popular_tags/").then(res => {
      this.setState({ popular_tags: res.data, ready: true });
    });
  }

  render() {
    const { popular_tags } = this.state;

    return (
      <React.Fragment>
        <Card className="sticky_sidebar__item">
          <CardBody>
            <p className="fs-14" style={{ color: "#818181" }}>
              <FormattedMessage id="sidebar.actual_now" defaultMessage="Actual now" />
            </p>
            {/* tags list */}
            {popular_tags!==undefined&&popular_tags.length > 0
              ? popular_tags.map((tag, index) => {
                  return (
                    <React.Fragment key={index}>
                      <ReactPlaceholder
                        showLoadingAnimation
                        type="textRow"
                        delay={2000}
                        ready={this.state.ready}
                        style={{
                          width: "25%",
                          display: "inline-block",
                          marginRight: 10
                        }}
                        >
                        <Link
                          to={`/tag/${tag.name}`}
                          className="popular_tags_item"
                          >
                          {`#${tag.name}`}
                        </Link>
                      </ReactPlaceholder>
                    </React.Fragment>
                  );
                })
              : null}
          </CardBody>
        </Card>
      </React.Fragment>
    );
  }
}

export default PopularTags;

[Роман Александрович]

IIITRIX, {console.log(popular_tags)}
засуньте выше вашего кода

[IIITRIX]

Роман Александрович, Вот

[Роман Александрович]

IIITRIX, уважаемый
у вас вместо массива данных с сервера прилетает html страница