Блог

Главная - Вопросы по программированию - Ошибка типа реакции: this.state.entries.map не является функцией

Ошибка типа реакции: this.state.entries.map не является функцией

#reactjs #heroku

#reactjs #heroku

Вопрос:

Мое приложение React работает на моем компьютере, но при развертывании в Heroku я получаю сообщение об ошибке «Ошибка типа: this.state.entries.map не является функцией» в консоли в инструментах Google Chrome, и страница не загружается. Я не уверен, почему. Кто-нибудь может мне помочь с этой проблемой? Ниже приведен код с этой страницы.

 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. Вы видите данные в консоли при вызове API в loadEntries ?

2. Скорее всего, это связано с вашим методом loadEntries, особенно когда вы пытаетесь entries: res.data . Если ваш вызов API не возвращает ответ, который выглядит как массив, вы получите указанную ошибку позже при попытке вызвать map. Можем ли мы взглянуть на реализацию вашего объекта API?

3. Можете ли вы прикрепить скриншот или копию того, что вы получили в консоли при API.getEntries() вызове

Ответ №1:

ваш код должен быть таким.

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

Кажется, ваши записи не получают массив, вот почему у вас возникает эта проблема.