尝试向 React 显示数据

Question

New to React, trying to display data (inside of a bootstrap modal) from MongoDB to React with an axios ajax request. Postman shows to be correct. React throws "TypeError: this.state.reviews.map is not a function" , which tells me it is not an array since .map() is an array method, but Im saving the state as an array. Very confused on how to display data in React, can anyone give an example of how to do this correctly? Searched here, docs, google, still not understanding.

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>
        )
    }
};

Answer 1

Response data is an object with property reviews which is an array, so you need to write:

componentDidMount() {

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

And in JSX part:

{review.reviews}

because review is array element which is an object.

Answer 2

You are still in the array. In order to map through the array, you need to locate the object properties.

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))
    };

You should be able to map through the array now without seeing the error.