Tag: reactjs

在React（ES6）中访问护照的req.user？ API调用返回req.user未定义: 我正在使用使用Passport进行身份validation的React Starter Kit制作应用程序。我现在正在尝试在前端访问req.user对象的阶段，但是我无法将req.user对象传递到React / ES6环境。我试图把这个东西作为一个prop和context来使用，但都无济于事。此时，我决定创build一个API端点，在那里我可以将req.user的值作为JSON返回，但req.user被返回为undefined ，尽pipe在get('*')下工作正常。这是我所做的GET调用，即返回undefined ： server.get('/user', (req, res) => { console.info('user: ', req.user); }); 而 server.get('*', async (req, res, next) => { console.info('*: ', req.user); // … the rest of the React Starter Kit rendering code 确实会返回req.user的对象，这让我感到困惑。护照会限制在某些网站吗？中间件： server.use(express.static(path.join(__dirname, 'public'))); server.use(cookieParser()); server.use(session({ secret: 'keyboard cat', cookie: { httpOnly: […]

获取“TypeError：调用`npm start`时无法读取未定义的属性”文件名“: 我正在关注这个相当冗长但非常丰富的post，关于使用以下技术堆栈设置Web应用程序： es 6 节点+expression 车把反应+反应路由器 webpack + babel 示例代码可以在这里find。我一直在跟着，一切都很顺利，我理解了最重要的概念。但是，当我尝试运行它时（使用git clone下载之后）出现错误，如下所示： $ npm install $ npm start 生成的输出包括错误是： > react-ssr-example@0.0.1 start /Users/nburk/Developer/node/templates/react-universal-web-apps-simple > npm-run-all –parallel gulp server > react-ssr-example@0.0.1 server /Users/nburk/Developer/node/templates/react-universal-web-apps-simple > node-dev app/babel-server.js > react-ssr-example@0.0.1 gulp /Users/nburk/Developer/node/templates/react-universal-web-apps-simple > gulp [19:10:39] Using gulpfile ~/Developer/node/templates/react-universal-web-apps-simple/gulpfile.js [19:10:39] Starting 'build:scss'… [19:10:39] Starting 'build:watch:app'… TypeError: Cannot read […]

反应function没有被调用: 我正在使用节点js呈现一个反应类，因为… var express = require('express'); var router = express.Router(); var React = require('react'); var reactDom = require('react-dom/server'); var App = React.createFactory(require('../components/index')); router.get('/', function(req,res) { var reactHtml = reactDom.renderToString(App({})); res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml}); }); module.exports = router; 页面呈现正常，但没有我添加的函数被调用。例如，在我的App类… class App extends React.Component { constructor(props) { super(props); } getClass() { return "a_class"; } render() { return ( […]

使用带有Reactjs的YouTubes JS API呈现iFramevideo: 我试过四处寻找例子，但我所有的是youtube-react npm包，我不想要，因为我想要做，并自己学习。我的问题是在这里的文档： https ： //developers.google.com/youtube/iframe_api_reference它告诉我提供一个锚标签为谷歌添加iFrame根据你传递它。然而，我已经在服务器端做出反应，并使用web-pack将其编译到客户端，我的反应组件到目前为止如下所示： import React from 'react'; import { Link } from 'react-router' import classnames from 'classnames' const videoId = 'XxVg_s8xAms'; export default React.createClass({ getInitialState: function() { return { YTid: videoId, } }, render() { return ( <section className="youtubeComponent-wrapper"> <div id="youtubePlayerAnchor"></div> </section> ) } }) 我已经尝试从开发人员的文档添加到客户端的script标记中的代码，但没有任何事情在控制台没有任何事情发生。有没有任何资源，或任何人都可以指出我正确的方向，我将如何去处理这个问题。谢谢！

如何在redux行动中实现承诺: 如何在redux动作中首先进行api调用，然后调度GET_TODO？ // first the api call has to be made, export function getTodos() { return { type: 'GET_TODOS', promise: request.get(API_URL) } } 那么它需要parsing响应 // using https://github.com/Leonidas-from-XIV/node-xml2js parseString(res, function (err, result) { // data gets parsed here }); 然后它必须发起事件。我试图如下，但它是抛出错误 const request = axios.get(url).then(res=>{ parseString(res, function (err, result) { if(result){ dispatch({ type: GET_TODOS, data:result }) } […]

无法使用webpack dev服务器中间件加载图像: 所以我花了24小时来调整我的代码，试图让这个工作和searchSO和谷歌，但没有运气 – 也许有人可以帮助！我的React应用程序在Express上运行，但是使用webpack-dev-server中间件。当我加载页面时，图像是空白的，就好像它们不存在一样。我没有得到任何错误信息在我的控制台（例如没有404错误），但图像元素只是显示alt文本，并没有显示实际应该在那里的png或svg 。顺便说一句，这不仅仅是反应组件不能渲染图像 – 我试图将一个图像文件硬编码到我的index.html文件中作为测试，这产生了相同的结果。这是我的代码： server.js（截断以排除数据库设置和额外的快速路由） const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const path = require('path'); const mongoose = require('mongoose'); const config = require('./webpack.dev.config'); // SERVER SETUP const app = express(); const router = express.Router(); var publicPath = path.resolve(__dirname, […]

如何运行nodejs应用程序作为永远或新贵的服务？: 我正在运行我的应用程序如下 NODE_ENV=production node_modules/.bin/babel-node –presets 'react,es2015' src/server.js 如何把它作为永远或新贵的服务来运行？

如何在WebStorm中debuggingReact Express Webpack应用程序: 我试图debugging反应快递应用程序的后端。我正在使用webpack捆绑。如何在WebStorm上编辑configuration，以便我可以debugging前端和后端？我正在使用WebStorm 2016。

componentDidMount不被触发: 嗨Im新的React和nodeJS，我试图通过反应调用我的nodejs api，并且我的componentDidMount甚至在渲染页面后都不会被触发。有人可以给我一些想法，我可能会错过的地方。 var React = require('react'); module.exports = React.createClass({ getInitialState: function() { return { jobs: [] } }, componentDidMount: function() { console.log("mount"); var _this = this; this.serverRequest = $.ajax({ …. }.bind(this) }); }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <div><h1>Jobs</h1> {this.state.jobs.map(function(job) { return ( <div key={job.id} className="job"> {job.name} {job.address} </div> […]

React / Redux – 无法读取未定义的属性“XXX”: 这是我一直坚持了两个多星期的事情，所以这个问题是我最后的机会。我希望任何人都可以帮助我（因为问题很可能是小事/我错过了）使用Node，Redux和React，我从Mongo数据库返回一个集合。我正在使用react-redux“连接”从我的商店检索我的数据如在我的JSX下面看到的。 JSX： import React from "react"; import {connect} from "react-redux" import {fetchArticle} from "../../actions/articleActions" var classNames = require('classnames'); import GlobalHero from '../modules/GlobalHero.jsx'; @connect((store) => { return {article: store.article.article, fetching: store.article.fetching}; }) export default class Article extends React.Component { // BEFORE COMPONENT RENDER (For Everyhing else) constructor() { super(); //sets initial state this.state […]