1

我的反应应用程序出现此错误，我发现很难调试。我用 mern 堆栈创建了这个应用程序，它在我的本地服务器上完美运行，从我的 mongo db 数据库中获取所有需要的数据并显示，但是当我在 heroku 上发布它时，我收到这个错误“未捕获（承诺）类型错误： this.state.data.map 不是函数”。现在，我记录了 this.state.data 并在 dev 上输出，但在生产中，它不起作用。这是网址https://desolate-brushlands-16337.herokuapp.com

请在下面查看我的反应代码。我将非常感谢任何信息。谢谢

import React, { Component } from 'react';
import moment from 'moment';

import $ from 'jquery';
import axios from 'axios';

import {

  Link
} from 'react-router-dom';

import blogTopImage from '../../images/blog2.png';


var divStyle;

divStyle = {
  backgroundImage: "url("  + blogTopImage + ")" ,
  backgroundPosition: 'center center',
  backgroundRepeat:'no-repeat',            
 backgroundSize: 'contain',
 height: '300px',
}


class Blog extends Component {
 constructor(props) {
   super()

this.state = {

  data :[],
  firstName:'',
        lastName:'',
        email:'',
}
     this.handleFirstNameChange = 
this.handleFirstNameChange.bind(this);
  this.handleLastNameChange = 
this.handleLastNameChange.bind(this);
  this.handleEmailChange = this.handleEmailChange.bind(this);


}



handleFirstNameChange = (e) => {
  this.setState({firstName:e.target.value})
}


handleLastNameChange = (e) => {
  this.setState({lastName:e.target.value})
}

handleEmailChange = (e) => {
  this.setState({email:e.target.value})
}



enter = (e) => {




  axios.post('../api/newsletter', {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email: this.state.email,

  })
  .then(function (response) {
    console.log('response from add post is ', response);

  })
  .catch(function (error) {
    console.log(error);
  });


  }



componentDidMount = () =>{

    axios.get(`../api/check`)
    .then(res => {
      var data = res.data;
       this.setState({ data });
    })



  $(document).ready(function(){

  $('.container').fadeIn(3000);

  });

}


 render() {

    return (

  <main>
<div class="wik31">
<div style={divStyle} >


</div>

</div>



  <div className="container">




  <div className="space6"></div>

  <div className=" row">




    {this.state.data.map(data => 
            <Link to={'/page/' + data._id}>


    <div className=" bog col s12 m6 l4 blog-container" style= 
   {{

backgroundImage: "url(" + data.postImage + ")" ,
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
height: '350px',



    }}>


     <div className="after" >
     <div className="blog_title">
     <p class="wik28"> {data.title}</p>
     </div>
     <div className="blog_date">

     <p> 
     {moment(data.timestamp).format('ll')}
    </p>

     </div>
     </div>



 </div>
 </Link>

 )}





    </div>

  <div className="space2"></div>

<form>
 <h4 className="wik7  center">Sign up for The Peel</h4>
    <div className="space6"></div>

     <div id="notif-container">

     <div className="input-field  notif-item1">
    <input type="text" id="inputFirstName"  onChange= 
{this.handleFirstNameChange.bind(this)} placeholder="First 
Name" required className="validate  tat"/>

  </div>

     <div className="input-field  notif-item1">
    <input type="text" id="inputLastName"  onChange= 
   {this.handleLastNameChange.bind(this)} placeholder="Last 
   Name" required className="validate  tat"/>
    </div>


  <div className="input-field notif-item2">
    <input type="text" id="inputEmail"  onChange= 
{this.handleEmailChange.bind(this)} placeholder="Email" 
 required className="validate  tat"/>
  </div>

  <div className="notif-item3">
                                <button className="btn btn-large 
BottonColor"onClick={this.enter.bind(this)}  type="submit" 
style = {{width:'100%'}}>
                                    subscribe
                                </button>


                            </div>



</div>

</form>
<div className="space2b"></div>




</div>
   <div className="space5"></div>
  </main>


    );
  }



}



export default Blog;
4

0 回答 0