Что не так с map()?

Question

[ParaBellum577]

Господа, приветствую! Подскажите пожалуйста, что делаю не так. Суть: есть массив с обьектами, по которому нужно пробежаться и вывести JSX элементы списком. Что может быть проще? - Но я не могу понять, почему элементы не отображаются. В консоли чисто, пропсы приходят как нужно.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import { refreshProjectsCache } from '../../../../actions/refreshProject';


const mstp = ({ projects, latestProjects, tracker: { TGTrackerID }, authorized: { user } }) => ({
  projects,
  latestProjects,
  currentUser: user,
  TGTrackerID,
});
const actions = { refreshProjectsCache };

class Uncategorized extends Component {
  static propTypes = {
    projects: PropTypes.array.isRequired,
    latestProjects: PropTypes.objectOf(PropTypes.string).isRequired,
    TGTrackerID: PropTypes.number.isRequired,
    currentUser: PropTypes.shape({
      avatar: PropTypes.string.isRequired,
    }).isRequired,
  };
  state = {
    activeProjects: [],
}
componentWillMount() {
  const filteredProjects = []
  this.props.projects.map(project => {
    if(project.ProjectStatus === "ACTIVE") {
      filteredProjects.push(project)
      this.setState({ activeProjects: filteredProjects})
    }
  })
}

  render() {
    const { activeProjects } = this.state
    // if (!activeProjects){null}

    const sortHolder = (
      <div className="sort-holder">
        <button className="up" data-param="project" data-direction="up" />
        <button className="down" data-param="project" data-direction="down" />
      </div>
    );

    const projectComponent = (
      activeProjects.length ?
      activeProjects.map((project, i) => {
          <div key={i} className="focus-projects">
            <div className="unc-focus-line">
              <div className="unc-focus-item">
                <img src={project.iconSrc} alt="icon" />
                <div>
                  <p>{project.Name}</p>
                  <span>12 App Opens | 3242 Switches</span>
                </div>
              </div>
              <div className="unc-focus-keywords">
                <span>3 keywords > ?</span>
              </div>
              <div className="unc-focus-settings">
                <img src="../../../../../style/imgs/icon_dots.svg" alt="dots" />
              </div>
            </div>
          </div>
        })
        : null
    );

    return (
      <div className="unc-titles">
        <div className="focus-header">
          <div>
            <span>Uncategorized</span>
            <img src="../../../../../style/imgs/Icon_info.svg" alt="" />
          </div>
          <div className="search">
            <input placeholder="Search" type="text" />
            <img src="../../../../../style/imgs/Search.svg" alt="" />
          </div>
        </div>
        <div className="focus-wrapper">
          <div>
            <span>Projects</span>
            {sortHolder}
          </div>
          <div>
            <span>Keywords</span>
            {sortHolder}
          </div>
        </div>
            {projectComponent}
      </div>
    );
  }
}

export default connect( mstp, actions )(translate(['Dashboard'])(Uncategorized));

Вот такая структура приходит, если проконсолить activeProjects в рендере.

Comments

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

а вот так

render() {
    const { activeProjects } = this.state
    // if (!activeProjects){null}

    const sortHolder = (
      <div className="sort-holder">
        <button className="up" data-param="project" data-direction="up" />
        <button className="down" data-param="project" data-direction="down" />
      </div>
    );
    return (
      <div className="unc-titles">
        <div className="focus-header">
          <div>
            <span>Uncategorized</span>
            <img src="../../../../../style/imgs/Icon_info.svg" alt="" />
          </div>
          <div className="search">
            <input placeholder="Search" type="text" />
            <img src="../../../../../style/imgs/Search.svg" alt="" />
          </div>
        </div>
        <div className="focus-wrapper">
          <div>
            <span>Projects</span>
            {sortHolder}
          </div>
          <div>
            <span>Keywords</span>
            {sortHolder}
          </div>
        </div>
          activeProjects&&  activeProjects.length &&
      activeProjects.map((project, i) => 
          (<div key={i} className="focus-projects">
            <div className="unc-focus-line">
              <div className="unc-focus-item">
                <img src={project.iconSrc} alt="icon" />
                <div>
                  <p>{project.Name}</p>
                  <span>12 App Opens | 3242 Switches</span>
                </div>
              </div>
              <div className="unc-focus-keywords">
                <span>3 keywords > ?</span>
              </div>
              <div className="unc-focus-settings">
                <img src="../../../../../style/imgs/icon_dots.svg" alt="dots" />
              </div>
            </div>
          </div>)
        )
      </div>
    );
  }
}

[ParaBellum577]

Роман Александрович, ты Боженька, спасибо, уважаемый)

Answer 1

[Антон Спирин]

1. Уберите внутреннее состояние и componentWillMount.
Нет смысла использовать состояние, если вы его не изменяете, лучше использовать props напрямую.
В componentWillMount у вас очень плохой код, а сам метод не рекомендован к использованию.

2.

render () {
  const { projects } = this.props;
  const activeProjects = projects.filter(project => project.ProjectStatus === "ACTIVE");

  const projectsList = activeProjects.map(project => (
    <div key={i} className="focus-projects">
      ...
    </div>
  ));

  return (
    ...
  );
}

Почему в componentWillMount плохой код:
1. Вы используете для перебора метод, который надо использовать только для преобразования данных. Для перебора правильно использовать forEach.
2. Вы выполняете setState для каждого активного проекта в массиве.

Как было бы правильно:

this.setState({
  activeProjects: this.props.projects.filter(project.ProjectStatus === "ACTIVE"),
});

Comments

[ParaBellum577]

Спасибо за исправления, учту.

Answer 2

[0xD34F]

activeProjects.map((project, i) => {
  <div key={i} className="focus-projects">

Ничего не возвращаете. Надо или фигурные скобки убрать, или return добавить.

Но вообще, пытаетесь делать что-то очень странное. Зачем массив activeProjects нужен как свойство стейта? Собирайте его прямо в render:

render() {
  const activeProjects = this.props.projects.filter(n => n.ProjectStatus === 'ACTIVE');
  ...

Answer 3

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

render() {
    const { activeProjects } = this.state
    // if (!activeProjects){null}

    const sortHolder = (
      <div className="sort-holder">
        <button className="up" data-param="project" data-direction="up" />
        <button className="down" data-param="project" data-direction="down" />
      </div>
    );
    return (
      <div className="unc-titles">
        <div className="focus-header">
          <div>
            <span>Uncategorized</span>
            <img src="../../../../../style/imgs/Icon_info.svg" alt="" />
          </div>
          <div className="search">
            <input placeholder="Search" type="text" />
            <img src="../../../../../style/imgs/Search.svg" alt="" />
          </div>
        </div>
        <div className="focus-wrapper">
          <div>
            <span>Projects</span>
            {sortHolder}
          </div>
          <div>
            <span>Keywords</span>
            {sortHolder}
          </div>
        </div>
          activeProjects&&  activeProjects.length &&
      activeProjects.map((project, i) => 
          (<div key={i} className="focus-projects">
            <div className="unc-focus-line">
              <div className="unc-focus-item">
                <img src={project.iconSrc} alt="icon" />
                <div>
                  <p>{project.Name}</p>
                  <span>12 App Opens | 3242 Switches</span>
                </div>
              </div>
              <div className="unc-focus-keywords">
                <span>3 keywords > ?</span>
              </div>
              <div className="unc-focus-settings">
                <img src="../../../../../style/imgs/icon_dots.svg" alt="dots" />
              </div>
            </div>
          </div>)
        )
      </div>
    );
  }
}