我不是一个非常有经验的开发人员,所以我可能缺少一些简单的东西。我有一系列从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不是函数
答案 0 :(得分: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
。
答案 1 :(得分:1)
您的问题是,考虑到您在from itertools import zip_longest
keys = ['Ptot', 'P1', 'P2', 'P3', 'Q1', 'Q2', 'Q3', 'QX', 'QY']
val = ['max', 'first', 'first', 'first', 'first', 'first', 'first']
#Pick the smaller of the 2 lengths and iterate only on those indexes
length = min(len(keys), len(val))
print({keys[idx]:val[idx] for idx in range(length)})
方法中调用getAssignments()
的事实,这意味着从组件安装到分配字段填充之间有一段时间。没有分配的存储,因此为什么会出现componentDidMount
错误。
仅在异步操作完成后才调用单击处理程序,因此在此之前定义了.map() is not a function
。
要解决此问题,您可以将“分配”字段的默认状态更改为:
assignments
如@ radonirina-maminiaina所述,您的代码的另一个问题是您的{
"assignments":[]
}
函数不会返回地图的结果,因此HTML将为空白
displayAssignments
函数根据给定的数组创建一个新数组,并将提供的函数应用于每个元素。
要考虑的另一件事是为什么您需要Array.map
才能进入作业列表。您可能可以更改操作或减速器以除去嵌套。