.map（）在渲染函数之外工作，但是在渲染内部使用时失败

Question

我不是一个非常有经验的开发人员，所以我可能缺少一些简单的东西。我有一系列从redux状态（this.props.assignments.assignments）中获取的对象。尝试在渲染返回中调用displayAssignments（）时，我得到的.map（）不是函数。但是，我有一个附加到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);

预期：通过映射呈现作业的名称和说明实际：获取this.props.assignments.assignments.map不是函数

Answer 1

您的问题是，考虑到您getAssignments()在componentDidMount方法中调用的事实，这意味着从组件安装到存储区中的赋值字段填充之间有一段时间，其中没有赋值，因此为什么要获得该值？.map() is not a function错误。单击处理程序仅在异步操作完成后才被调用，因此assignments是在那时定义的。要解决此问题，您可以将工作分配字段的默认状态更改为：{ &nbsp;&nbsp;&nbsp;"assignments":[] &nbsp;&nbsp;&nbsp;}正如@ radonirina-maminiaina提到的，您的代码的另一个问题是您的displayAssignments函数不会返回地图的结果，因此HTML将为空白该Array.map函数根据给定的数组创建一个新数组，并将提供的函数应用于每个元素。要考虑的另一件事是为什么您需要assignments.assignments进入作业列表。您可能会更改操作或减速器以除去嵌套。