.map () работает за пределами функции рендеринга, но не работает при использовании внутри рендера

Question

Я не очень опытный разработчик, поэтому я могу упустить что-то простое.У меня есть массив объектов, которые я получаю из моего состояния редукса (this.props.assignments.assignments).Я получаю .map () не является функцией при попытке вызвать displayAssignments () в моем возвращении рендеринга.Тем не менее, у меня есть другая функция, которая прикреплена к onClick, которая выполняет ту же карту и регистрирует «имя» в консоли, и эта функция работает, как и ожидалось (когда я закомментирую displayAssignments ()).Я понятия не имею, почему .map () будет работать на моем onClick, но не на displayAssignments.

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

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getAssignments } from '../../Actions/assignmentActions.js';

class Assignments extends Component {
  componentDidMount() {
    this.props.getAssignments();
  };

  showAssignments = () => {
    console.log(this.props.assignments.assignments);
    this.props.assignments.assignments.map(assignment => (
      console.log(assignment.name)
    ));
  };
  displayAssignments = () => {
    this.props.assignments.assignments.map(assignment => {
      return (
        <div>
          <p>{assignment.name}</p>
          <p>{assignment.description}</p>
        </div>
      )
    })
  };

  render() {
    return (
      <div>
        <h1>Assignments</h1>
        <button onClick={this.showAssignments}>Click Me</button>
        {this.displayAssignments()}
      </div>
    );
  };
};

Assignments.propTypes = {
  getAssignments: PropTypes.func.isRequired,
  assignments: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  assignments: state.assignments
});

export default connect(mapStateToProps, { getAssignments })(Assignments);

Ожидается: для отображения имении описание назначений путем сопоставления Actual: получение this.props.assignments.assignments.map не является функцией

Answer 1

Ваша проблема в том, что, учитывая тот факт, что вы вызываете getAssignments() в методе componentDidMount, это означает, что есть промежуток времени между моментом, когда компонент смонтирован, и полем назначения заполнено в хранилище, в котором естьнет назначений, следовательно, почему вы получаете ошибку .map() is not a function.

Обработчик щелчков вызывается только после завершения асинхронной операции, поэтому к этому моменту определяется assignments.

Чтобы исправить это, вы можете изменить состояние по умолчанию для поля назначения следующим образом:

{
   "assignments":[]
}

Другая проблема с вашим кодом, как упомянул @ radonirina-maminiaina, заключается в том, что ваша displayAssignments функция не возвращает результат карт, поэтому HTML-код будет пустым

Функция Array.map создает новый массив из данного массива с предоставленной функцией, примененной к каждому элементу.

Еще одна вещь, которую следует учитывать, - это то, почему вам нужен assignments.assignments, чтобы попасть в список назначений.Возможно, вы могли бы изменить свои действия или редуктор, чтобы удалить вложение.

Answer 2

Вы должны вернуть map() как значение displayAssigments:

displayAssignments = () => {
    return this.props.assignments.assignments.map(assignment => {
      return (
        <div>
          <p>{assignment.name}</p>
          <p>{assignment.description}</p>
        </div>
      )
    })
  };

или просто снять фигурную скобку, которая обертывает .map():

displayAssignments = () => this.props.assignments.assignments.map(assignment => 
  <div>
    <p>{assignment.name}</p>
    <p>{assignment.description}</p>
  </div>
)

Для вашегоошибка не работает, убедитесь, что this.props.assignments.assignments является Array.