React 中未使用 ES6 fetch 定义 fetch 方法

2024-04-03

我在我的第一个 React js 应用程序中遇到了 fetch 函数的问题。

这是我的项目的结构:

hello-world
  -- app
     -- components
       -- main.jsx
  -- node_modules
  -- public
     -- build.js
     -- index.html
  -- package.json

这是我使用 npm 安装的:

npm install react react-dom babel-core babel-loader babel-preset-es2015    babel-preset-react webpack --save-dev
npm install --save isomorphic-fetch es6-promise

我使用网页包 webpack.config

module.exports = {
  entry: './app/components/main.jsx',
  output: {
    path: './public/',
    filename: "build.js",
  },
  module: {
    loaders: [
      {
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

包.json

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack -w"
  },
  "author": "mannuk",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "webpack": "^1.13.2"
  },
  "dependencies": {
    "es6-promise": "^3.3.1",
    "isomorphic-fetch": "^2.2.1"
  }
}

这是我构建 UI 的文件:

main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import 'isomorphic-fetch';
import 'es6-promise';

class Person extends React.Component {

  constructor(props){
    super(props);
    this.state = {people : []};
  }

  componentWillMount(){
    fetch('xxx/people',
      method: 'get',
      headers: {'token' : 'xxx'}
      )
      .then((response) => {
        return response.json()
      })
      .then((people) => {
        this.setState({ people: people })
      })
  }

  render(){
    return <div>
        <input type="text" value={this.state.people[0].name}></input>
      </div>
  }
}

ReactDOM.render(
  <Person/>,
  document.getElementById('container')
);

如果我尝试通过浏览器运行它,它会失败(未定义获取方法)我还检查了此相关帖子ES6 `fetch 未定义` https://stackoverflow.com/questions/36484156/es6-fetch-is-undefined我已经包含了导入但没有成功。我还包含了 es6-promise import 但它也失败了。

我究竟做错了什么?是配置问题还是什么?当我运行“npm run build”时,没有错误,并且 build.js 似乎没问题。


这是导出的默认值,所以...

import fetch from 'isomorphic-fetch'
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 中未使用 ES6 fetch 定义 fetch 方法 的相关文章

  • 一次更新猫鼬中的多个文档

    我有一个用户文档数组 每个用户都有关注者属性 它是一个数字 我只想将此属性增加 1 然后立即更新数据库中的所有这些用户文档 更多细节 在请求中 我有一组用户 id 我使用这些 id 进行查询以获取一组用户文档 const users awa
  • Docker - SequelizeConnectionRefusedError:连接 ECONNREFUSED 127.0.0.1:3306

    我正在尝试使用 Docker 容器启动并运行我的 Nodejs 应用程序 我不知道可能出了什么问题 当我使用控制台调试凭据时 凭据似乎已正确传递 另外启动sequel pro并使用相同的用户名和密码直接连接似乎也可行 当节点在容器中启动时
  • Node.js - 重载函数

    有没有一种方法可以重载node js中的函数 类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
  • Node npm 包抛出使用严格:全局发布和安装后未找到命令

    我正在尝试发布 npm 包 当我全局安装该包并尝试运行 cli 命令时 我收到此错误 nvm versions node v0 12 2 bin myPack line 1 use strict command not found nvm
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • 以编程方式更改 Redux-Form 字段值

    当我使用redux formv7 我发现没有办法设置字段值 现在在我的form 我有两个select成分 当第一个时 第二个的值就会很清楚select元件值改变 在类渲染中 div div site div div div div
  • @mailchimp/mailchimp_marketing/types.d.ts'不是nodeJs中的模块

    我在 NodeJS 应用程序中导入了 import mailchimp mailchim marketing import mailchimp from mailchimp mailchimp marketing 但是 它给出以下错误 ty
  • JSX 元素类型“Element[]”不是 JSX 元素的构造函数?

    types react 16 7 17 types react dom 16 0 11 打字稿 3 2 2 function ArryElement return div 1 div div 2 div function App retur
  • 从 websocket 发送数据到 socket.io

    我使用 websocket 接口连接到 websocket 服务器 如果我想将通过 websocket 接口从 websocket 服务器接收到的数据发送到通过 http 服务器连接到我的客户端 我应该使用 socket io 吗 所以最后
  • 使用 rollup.js 创建 React 库时出现错误 null(读取“useState”)

    我正在使用 rollup js 创建一个反应库 但是当我运行时npm run build我收到一个错误 仿佛useState尝试从中检索钩子null Uncaught TypeError Cannot read properties of
  • web3.eth.sendSignedTransaction() 总是返回“返回错误:nonce 太低”

    I used 电子邮件受保护 cdn cgi l email protection在 Node js 中与私有区块链交互 我是按照官方文档写的代码 电子邮件受保护 cdn cgi l email protection var Web3 re
  • Redux - 从函数调用操作

    我正在尝试从函数调用 redux 操作 我调用该函数的组件已连接到商店 但是 如果我通过以下操作 它就不起作用 function myFunc action action 有没有办法通过参数传递动作 谢谢 using bindActionC
  • 带换行符的 React/Momentjs 日期格式

    我有一个日期字符串 我想对其进行格式化 其中数字位于月份下 Jul 6 我尝试了几种不同的方法来添加新行
  • 如果没有“new”,则无法调用类构造函数

    感谢这个问题已经被问过几次了 但是我遇到的几乎所有情况都是有人试图扩展非本地类的情况 我的情况有所不同 我有一个非常简单的基类 名为CObject如下 export class CObject extends BaseObject cons
  • Nodejs 中的子域

    如何处理nodejs的子域请求 例如以下代码回显test在控制台中的任何请求http localhost 9876 任何内容 http localhost 9876 5Banything 5D var http require http h
  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • Node.js 升级在 Windows 中仍然显示旧版本

    我已使用 msi 安装程序下载并安装了新版本的 nodejs 4 1 2 之后我跑了node v 但它仍然显示旧版本 0 12 2 我尝试重新启动Windows 甚至卸载nodejs并重新安装它 但仍然显示相同的内容 为什么会发生这种情况
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
  • Meteor.setTimeout 和 Meteor.methods 之间的并发

    在我的 Meteor 应用程序中实现回合制多人游戏服务器 客户端通过发布 订阅接收游戏状态 并且可以调用 Meteor 方法sendTurn将回合数据发送到服务器 他们无法直接更新游戏状态集合 var endRound function g
  • 类中可以有生成器 getter 吗?

    我的意思是吸气剂是发电机 我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo

随机推荐