反应TypeError:this.state.entries.map不是函数

时间:2019-04-12 22:02:01

标签: reactjs heroku

我的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>)
                                }

1 个答案:

答案 0 :(得分:0)

您的代码应该是这样的。

loadEntries = () => {
    API.getEntries()
        .then(res => {
            console.log(res.data)
            this.setState({ entries: [res.data], title: "", date: "", entry: "" })
        })
        .catch(err => console.log(err));
};

似乎您的条目未接收到数组,这就是为什么您遇到此问题的原因。