时间戳

首页 > 解决方案 > 尝试向 React 显示数据

javascript - 尝试向 React 显示数据

问题描述

React 新手，尝试使用 axios ajax 请求从 MongoDB 显示数据（在引导模式内）到 React。邮递员证明是正确的。React throws "TypeError: this.state.reviews.map is not a function"，它告诉我它不是一个数组，因为它.map()是一个数组方法，但我将状态保存为一个数组。对如何在 React 中显示数据感到非常困惑，谁能举例说明如何正确执行此操作？在这里搜索，文档，谷歌，仍然不明白。

邮递员结果

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

标签： javascriptreactjsajaxmern

解决方案

响应数据是一个具有属性的对象，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是数组元素，它是一个对象。

推荐阅读