Блог

Новое в React, попытка отобразить данные (внутри модального загрузчика) из MongoDB для реагирования с помощью запроса axios ajax. Postman показывает правильность. React выдает "TypeError: this.state.reviews.map is not a function" ошибку, которая говорит мне, что это не массив, поскольку .map() это метод массива, но я сохраняю состояние в виде массива. Очень смущен тем, как отображать данные в React, может кто-нибудь привести пример того, как это сделать правильно? Искал здесь, документы, Google, все еще не понимаю.

 import React from 'react';
import Axios from 'axios';
import Rater from 'react-rater';
import './comment-styles.scss';

export class CommentBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            reviews: []
        }
        this.addReview = this.addReview.bind(this);
    };


    addReview() {
        Axios({
            method: 'POST',
            url: 'http://localhost:8080/breakfast-tacos/reviews',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            this.setState({ reviews: [response.data.id] })      
        }).catch(error => console.log(error))
    }


    componentDidMount() {

        Axios.get('http://localhost:8080/breakfast-tacos/')
        .then(reviews => {
            this.setState({ reviews: reviews.data })
        })
        .catch(err => console.log(err))
    };



    render() {
        
        return (
            <div id="commentWrapper">
                <div className="commentHeader">
                    <h5>Leave a Rating!</h5>
                    <Rater style={{fontSize: '35px'}} />
                    <button id="submitRatingBtn" type="submit">Submit</button>

                    <form action="/breakfast-tacos" method="POST">
                        <textarea className="reviewTextBox" maxLength="250" placeholder="Write a review..." name="reviews"></textarea>
                        <button id="submitReviewBtn" type="submit" onClick={this.addReview}>Submit</button>
                    </form>

                </div>
                <hr />
                <div className="reviews">
                    <span className="user">
                        <h6>username:</h6>
                    </span>
                    <span className="text">
                        
                        {this.state.reviews.map((review, text) => {  
                                return (
                                    <p key={text}>
                                        {review} /*Where I want to display the data*/
                                    </p>
                                )
                            })}

                    </span>
                </div>
                <hr />
            </div>
        )
    }
};


 

Данные ответа — это объект со свойством reviews , представляющим собой массив, поэтому вам нужно написать:

 componentDidMount() {

        Axios.get('http://localhost:8080/breakfast-tacos/')
        .then(reviews => {
            this.setState({ reviews: reviews.data.reviews })
        })
        .catch(err => console.log(err))
    };
 

И в части JSX:

{review.reviews}

потому review что это элемент массива, который является объектом.

Вы все еще находитесь в массиве. Чтобы отобразить массив, вам необходимо найти свойства объекта.

 addReview() {
        Axios({
            method: 'POST',
            url: 'http://localhost:8080/breakfast-tacos/reviews',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            this.setState({ reviews: [response.data.id] })      
        }).catch(error => console.log(error))
    }


    componentDidMount() {

        Axios.get('http://localhost:8080/breakfast-tacos/')
        .then(reviews => {
            this.setState({ reviews: reviews.data.reviews })
        })
        .catch(err => console.log(err))
    };
 

Теперь вы должны иметь возможность отображать массив, не видя ошибки.