Tag: reactjs

根据控制台input来定位特定的环境

为了说明这个问题，我正在使用popup的create-react-app作为我的项目的布局。 我有5个环境，我的应用程序将被部署到。 每个环境都有相同的服务（主要是），例如： //environment 1 https://environment1.service1.foo.bar https://environment1.service2.foo.bar //environment 2 https://environment2.service1.foo.bar https://environment2.service2.foo.bar 为了在过去的项目（Angular / Gulp）上实现这一点，我有一个吞吐任务，基本上会寻找一个variables被传入 gulp build –environment environment1 代码如下所示： gulp.task('environment', ['clean-environment'], function() { log('Copying environment'); var environmentFile = config.environmentSrcDir + 'env2.js'; if (args.environment !== 'env2' || args.environment === 'env3' || args.environment === 'env4' || args.environment === 'evn5') { environmentFile = config.environmentSrcDir + args.environment + '.js'; […]

ExpressJS + Webpack + react-router v4

我正试图build立自己的模板来创build反应应用程序，以便知道幕后发生了什么。 我被困在使用Webpack / Express / react-router v4的服务器渲染中。 只是不知道如何解决它。 我的express.js文件如下所示： const express = require('express'); const morgan = require('morgan'); const path = require('path'); const React = require('react'); const ReactDOMServer = require('react-dom/server'); const StaticRouter = require('react-router').StaticRouter; const App = require('./src/app'); const app = express(); // Views app.set('view engine', 'ejs'); app.set('views', path.resolve(__dirname, 'src', 'templates')) // Middlewares app.use(morgan(':method :url :status […]

无法读取我的API或特定的API

我真的很困惑，如果你告诉我，我的代码是错误的，我已经尝试了不同的API，它的工作原理。 但在我的情况下，在react.js中有几个API无法访问。 请帮助我，并纠正。 你可以尝试这些在react.js中不起作用的API，但是总是得到脚本抓取失败或networking错误： http://pp53.azurewebsites.net/pp53service.svc/viewprovincelist https://www.getpostman.com/collections/1d8df8b0b5bf27e5009b 第一个是我的API，第二个是其他。 我已经尝试了邮差和其他编程语言和其他框架，如ASP.NET MVC的API，但它不再麻烦了。 但是当我尝试与axios react.js，获取，即使ajax该API将无法正常工作。 有没有人可以向我解释为什么？ 因为如果你使用这一个https://api.myjson.com/bins/1cfkej或这个http://jsonplaceholder.typicode.com/todos没有问题。 谢谢！！ 这是我的代码 import React from 'react'; import axios from 'axios'; export class viewDetailPP53 extends React.Component { constructor(props) { super(props); this.state = { count : [] }; } componentDidMount(){ var self = this; axios.get('http://pp53.azurewebsites.net/pp53service.svc/viewprovincelist') .then(function (results) { self.setState({ count: results.data }); }) .catch(function […]

为什么在组件导出期间应用HOC而不是导入组件

我基本的理解是，像连接（用于连接REDX存储）和其他HOC的HOC在输出时应用于组件。 喜欢这个 import React, { Component } from 'react'; import './App.css'; import myHoc from './myHoc/index'; class App extends Component { render() { return ( <div className="App"> </div>); } } export default myHoc({})(App); 如果在import过程中使用HOC会更好，因为这样可以更容易地制造可重复使用的组件。 相同的组件可以从商店或道具中挑选道具，并且由父组件负责检查在组件上应该应用什么HOC。 我知道我们可以使用容器组件和呈现子组件，但只是在JSX中添加代码（如果有许多容器组件，将看起来不错） 尽pipe我们可以这样做 import React, { Component } from 'react'; import './App.css'; import myHoc from './myHoc/index'; import AppChild from './AppChild'; const NewAppChild […]

无法在React服务器端呈现中处理UnhandledPromiseRejectionWarning

我有一个在客户端和服务器上呈现的React应用程序。 当任何组件的render（）失败时（由于我的代码中有一个bug，例如试图读取一个未定义的对象的属性），那么如果我从浏览器的另一个页面导航，那么我得到一个完整的堆栈跟踪浏览器开发者控 但是，当我触发服务器端的相同代码的呈现（通过直接将浏览器指向包含有问题的组件的有问题的路由），那么我只是在服务器的控制台中得到这样的错误： (node:97192) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'tagDefinitionId' of undefined 没有堆栈跟踪，debugging有点困难。 问题： 在服务器端渲染过程中是否有一种方法可以覆盖所有的render（）失败？ 下面是触发服务器端呈现以响应请求的Node-Express端点的代码。 我相信renderToString（）内部发生了未处理的承诺拒绝，但是这个函数返回一个string，而不是一个承诺。 ` import configureStore from '../../redux/store'; import { renderToString } from 'react-dom/server'; import { Provider } from 'react-redux'; import React from 'react'; import RouterContext from 'react-router/lib/RouterContext'; import createMemoryHistory from 'react-router/lib/createMemoryHistory'; import match from […]

使用获取获取一个简单的string

所以我在我的API中有这个： router.get('/assetName', function(req, res, next){ //Get the token from the cookies var token = req.cookies.access_token; //Check it with the config secret if(jwt.verify(token, config.secret)){ //find from name in the request body User.find({_id: req.query.id}).then(function(users){ var z; var name = []; var assetHolder = users[0].assets; for(z=0; z < assetHolder.length; z++){ if(assetHolder[z]._id == req.query.vid){ name = assetHolder[z].name; } } […]

用npm安装分叉反应组件库

我正在尝试npm install一个很好的项目的叉子有很多漏洞https://github.com/codyc4321/react-data-components 。 我们需要我们自己的副本并进行更改，所以我分叉它并从回购中删除它。 cchilders:~/work_projects/myproject (feature/investigate-fixing-react-data-components-table) $ rm -rf node_modules/react-data-components/ cchilders:~/work_projects/myproject (feature/investigate-fixing-react-data-components-table) $ atom . cchilders:~/work_projects/myproject (feature/investigate-fixing-react-data-components-table) $ npm i https://github.com/codyc4321/react-data-components rehub-portal@1.0.0 /Users/cchilders/work_projects/myproject ├── UNMET PEER DEPENDENCY coffee-script@1.x ├── UNMET PEER DEPENDENCY react@15.4.0 └── react-data-components@1.1.1 (git+https://github.com/codyc4321/react-data-components.git#bfa230d806c59f4703346a8377b2e1938152cefd) npm WARN coffee-loader@0.7.3 requires a peer of coffee-script@1.x but none was installed. npm WARN react-simpletabs@0.7.0 requires a peer of […]

创build反应应用程序无法读取环境variables

我有一个反应的应用程序，用create-react-app创build，然后用命令构build应用程序： npm run build 如果我们通过运行ENV=production npm run start应用程序和开发代码，运行ENV=production npm run start它可以读取process.env.ENVvariables，因为我将这个插件添加到webpack dev config new webpack.DefinePlugin({ 'process.env':{ 'ENV': JSON.stringify(process.env.ENV), } }), 我也将上面的脚本添加到webpack prod config，但是如果在构buildENV=prod serve -s build后尝试执行此命令，则无法读取环境variables 如何解决这个问题？

在后端，响应和反应本机客户端之间共享打字稿代码

我已经开始将我的项目转换为打字稿，同时我决定改进node.js后端之间的代码重用，响应Web客户端和反应本地移动客户端。 这是我的项目结构： ├ commons (code shared between backend and frontend, mostly type definitions and utils ├ clients (code shared between web and mobile clients, depends on commons: containers, utils, forms… ) ├ backend (express server, depends on commons) ├ web (create-react-app, not ejected, no SSR needed, depends on clients) ├ mobile (react-native client, depends on […]

反应连接到节点Cors预检失败

节点服务器 var app = express(); app.use(function(req, res, next) { res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Origin', req.headers.origin); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'); if ('OPTIONS' == req.method) { res.send(200); } else { next(); } }); React JS Fetch function request(url, options) { return fetch(url, options) .then(checkStatus) .then(parseJSON); } export function* login() { const username = yield select(makeSelectUsername()); const […]