亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

.map()在渲染函數之外工作,但是在渲染內部使用時失敗

.map()在渲染函數之外工作,但是在渲染內部使用時失敗

慕的地6264312 2021-05-14 17:13:24
我不是一個非常有經驗的開發人員,所以我可能缺少一些簡單的東西。我有一系列從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不是函數
查看完整描述

2 回答

?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

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

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

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

{
   "assignments":[]
   }

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

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

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


查看完整回答
反對 回復 2021-05-27
  • 2 回答
  • 0 關注
  • 205 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號