我的React应用程序可以在我的计算机上运行,但是当我部署到Heroku时,出现错误,并在Google Chrome工具的控制台下显示“ TypeError:this.state.entries.map不是一个函数”,该页面将无法正常运行。吨负荷。我不知道为什么。谁能帮我解决这个问题?下面是该页面上的代码。
class Journal extends Component {
state = {
entries: [{}],
date: "",
title: String,
entry: String,
cdate: "",
ctitle: String,
centry: String,
searchbar: true,
show: false
}
componentDidMount() {
this.loadEntries();
}
loadEntries = () => {
API.getEntries()
.then(res => {
console.log(res.data)
this.setState({ entries: res.data, title: "", date: "", entry: "" })
})
.catch(err => console.log(err));
};
displaySearchBar = () => {
this.setState({ searchbar: false }, () => { console.log("Search bar") })
}
showModal = (currentEntry) => {
console.log(currentEntry, "Show Modal");
this.setState({
show: true,
centry: currentEntry.entry,
ctitle: currentEntry.title,
});
};
hideModal = () => {
this.setState({ show: false });
};
render() {
return (
<Container fluid>
<br />
<Row>
<Col size="md-2" />
<>
<Col size="md-8">
<div className="card mb-3">
<h1>Journal Entries</h1>
{this.state.entries.length ? (
<List>
{this.state.entries.map(entry => (
<ListItemDetail
key={entry.id}
showModal={this.showModal}
title={entry.title}
date={entry.date}
entry={entry.entry}
id={entry.id}
loadEntries={this.loadEntries}>
</ListItemDetail>
))}
</List>
) :
(<h3>No Results to Display</h3>)
}
答案 0 :(得分:0)
您的代码应该是这样的。
loadEntries = () => {
API.getEntries()
.then(res => {
console.log(res.data)
this.setState({ entries: [res.data], title: "", date: "", entry: "" })
})
.catch(err => console.log(err));
};
似乎您的条目未接收到数组,这就是为什么您遇到此问题的原因。