.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

您應該將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 。

Answer 2

您的問題是，考慮到您在componentDidMount方法中調用getAssignments()的事實，這意味着從組件安裝到存儲區中的賦值字段填充之間有一段時間，其中沒有賦值，因此為什么得到.map() is not a function錯誤。

僅在異步操作完成后才調用單擊處理程序，因此將在那時定義assignments 。

要解決此問題，您可以將工作分配字段的默認狀態更改為：

{
   "assignments":[]
}

正如@ radonirina-maminiaina所提到的，您的代碼的另一個問題是您的displayAssignments函數不會返回地圖的結果，因此HTML將為空白

Array.map函數根據給定的數組創建一個新數組，並將提供的函數應用於每個元素。

要考慮的另一件事是為什么您需要assignments.assignments才能進入作業列表。 您可能可以更改操作或減速器以除去嵌套。