个人中心
gpt4 book ai didi

javascript - componentDidMount 未按预期执行

转载 作者：行者123 更新时间：2023-11-30 20:07:03 24 4
gpt4 key购买 nike

<分区>

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

使用 isomorphic-fetch 进行抓取。我也在寻找一个好的 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>);
  }
}

24 4 0
文章推荐： c - 如何读取txt文件的部分内容
文章推荐： c# - 什么 Windows 窗体组件最适合用于创建日志文件查看器 C#
文章推荐： c - C编译器Web服务
文章推荐： c# - 了解数据绑定(bind)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com