componentDidMount没有按预期执行

时间:2018-10-15 08:11:44

标签: javascript reactjs

我是ReactJS的新手,试图使用API​​,API和后端从后端获取数据运行良好,但是React中没有数据列表,我的错误在哪里?

使用同构获取。我也在寻找一个好的React,API CRUD博客,请指导我

import React, {
  Component
} from 'react';
import fetch from 'isomorphic-fetch';
export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      blogPosts: []
    };
  }
  componentDidMount() {
    fetch('http://localhost:3001/user/view', {
        method: 'GET',
        mode: 'CORS'
      }).then(res => res.json())
      .then(data => {
        this.setState({
          blogPosts: data
        })
      }).catch(err => err);
  }
  render() {
    return (
 <div>
  <table className="table table-hover table-responsive">
    <thead>
      <tr>
        <th>id</th>
        <th>Title</th>
        <th>Options</th>
      </tr>
    </thead>
    <tbody>

      {this.state.blogPosts && this.state.blogPosts.map(post => { return (
      <tr key={post._id}>
        <td>{post._id}</td>
        <td>{post.title}</td>
        <td>
          <a href="#" className="btn btn-default btn-sm">Edit</a>
          <a href="#" className="btn btn-danger btn-sm">Delete</a>
        </td>
      </tr>
      ); })}
    </tbody>
  </table>
</div>);
  }
}

1 个答案:

答案 0 :(得分:0)

我认为您在CORS中遇到问题,因此请尝试将此'CORS'至'cors'