小编mod*_*tor的帖子

我正在使用React和React Router与Redux建立网站.许多路由(页面)需要登录.如果用户未登录,我可以重定向到登录:

function requireAuth(nextState, replace) {
    let loggedIn = store.getState().AppReducer.UserReducer.loggedIn;

    if(!loggedIn) {
        replace({
            pathname: '/login',
            state: {
                nextpathname: nextState.location.pathname
            }
        });
    }
}

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute component={Index} />
                <Route path="login" component={Login} />
                <Route path="register" component={Register} />
                <Route path="dashboard" component={Graph} onEnter={requireAuth}>
                    ... some other route requires logged in ...
                </Route>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('entry')
);

如果用户没有登录,请查看代码,我使用onEnter挂钩重定向到'/ login'路由.用于检查用户登录的数据是在商店中,并且在用户登录后它将更新.

它工作得很好,但问题是当我刷新页面时,存储将被重置并且用户没有登录状态.

我知道这是因为Redux存储只是内存存储,所以refesh页面会丢失所有数据.

检查服务器会话每次刷新都可以工作,但这可能是太多的请求,所以这看起来不错.

将登录状态数据保存到localStorage可能有效,但在这种情况下,我应该检查每个AJAX调用失败该请求被拒绝,因为会话已过期或不存在像某些东西,这看起来也是个坏主意.

有没有办法更清楚地解决这个问题？我的网站将会使用很多人,所以我希望尽可能减少XHR呼叫.

任何建议将非常感谢.

我有一些React.js的问题.这是我的代码:

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './containers/App';
import todoApp from './reducers';

let store = createStore(todoApp);
let rootElement = document.getElementById('root');

React.render(
    <Provider store={store}>
        {() => <App />}
    </Provider>,
    rootElement
);

并运行页面,它说:

propType失败:children提供的prop无效Provider,预期单个ReactElement

这是我相关的已安装节点模块的列表:

• 反应15.0.1
• react-redux 4.4.5
• redux 3.4.0

实际上,我目前正在学习与Redux的React,所以我很难怎么做.我只是按照网站上的教程(我可以提供一个链接,但它不是英文)但它只是没有使用该错误消息.当我搜索时,有人说反应和react-redux的升级版本,但我安装了最新版本.任何建议都会非常感激.

我在我的项目中使用了browserify + gulp + babel,并且在ES7功能方面存在问题.这些是我安装的:

• babel-plugin-transform-async-to-generator@6.8.0
• babel-plugin-transform-decorators-legacy@1.3.4 //使用装饰器
• babel-polyfill@6.9.1
• babel-preset-es2015@6.9.0
• babel-preset-es2016@6.11.0
• babel-preset-stage-0@6.5.0
• babelify@7.3.0
• browserify@13.0.1
• 吞
• 一饮而尽,sourcemaps
• 乙烯基 - 缓冲
• 乙烯基 - 源极 - 流

这是我的gulp代码:

gulp.task('build', () => {
    let buildPath;
    let destPath;

    buildPath = `./src`;
    destPath = `./dist`;

    return browserify(`${buildPath}/app.js`)
    .transform(babelify, { 
        presets: ["es2015", "es2016", "stage-0"],
        plugins: ["transform-decorators-legacy", "transform-async-to-generator"]
    })
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(`${destPath}`));
});

这是我的js代码:

import 'babel-polyfill';

// Async Functions
function wait(t) {
    return new Promise((r) => setTimeout(r, t));
}

async function asyncMania() {
    console.log('1'); …

我目前正在学习gulp.js. 当我看到gulp.js的教程和文档时,这段代码:

gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));

使用名为'minjs'的新目录创建uglified javascript文件.当然,我使用--dev-save选项安装了gulp-uglity.控制台上没有错误消息,所以我不知道是什么问题.我尝试用"sudo"吞咽,但仍然无法正常工作.

所以我去了根目录并搜索了所有文件系统,但没有名为'minjs'的文件,所以我猜它只是不起作用.为什么会这样？任何人都知道这个问题,为什么会发生这种情况会很好.

整个源代码:

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('default', function() {
    console.log('mifying scripts...');

    gulp.src('js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('minjs'));
});

我正在尝试将onscroll事件处理程序添加到特定的dom元素.看看这段代码:

class ScrollingApp extends React.Component {
    ...
    _handleScroll(ev) {
        console.log("Scrolling!");
    }
    componentDidMount() {
        this.refs.list.addEventListener('scroll', this._handleScroll);
    }
    componentWillUnmount() {
        this.refs.list.removeEventListener('scroll', this._handleScroll);
    }
    render() {
        return (
            <div ref="list">
                {
                    this.props.items.map( (item) => {
                        return (<Item item={item} />);
                    })
                }
            </div>
        );
    }
}

代码非常简单,正如您所看到的,我想处理div#list scrolling.当我运行这个例子时,它不起作用.所以我尝试直接绑定this._handleScroll渲染方法,它也不起作用.

<div ref="list" onScroll={this._handleScroll.bind(this)> ... </div>

所以我打开了chrome检查器,直接添加onscroll事件:

document.getElementById('#list').addEventListener('scroll', ...);

它正在工作!我不知道为什么会这样.这是React的错误还是什么？还是我错过了什么？任何设备都将非常感激.

我听说 Socket.io 在 React Native 中不能正常工作，所以我决定改用普通的 WebSocket。

我正在使用 node.js 来实现 WebSocket 服务器，这并不难。使用浏览器，我尝试的所有方法都有效，但是使用 React Native，没有成功。

这些是我尝试实现 websocket 服务器的方法：

• 快递-ws
• WS

express-ws 在没有任何错误消息的情况下无法正常工作。只是它说无法连接某些东西。

所以我把模块改成了ws，这个模块应该是客户端和服务器都需要的，所以我做了。服务器已工作，但是在 AVD 上使用 android 的应用程序中时，它说：

需要未知模块“url”。如果您确定该模块在那里，请尝试重新启动打包程序或运行“npm install”。

所以我完全删除了 node_modules 目录并重新安装它们，但再次出现相同的错误。

我正在使用 node v6.2.2，react-native-cli 1.0.0，react-native 0.33.0。

这是带有 ws 模块的服务器代码（与 ws 模块自述文件相同）：

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 3000 });

wss.on('connection', (socket) => {
    socket.on('message', (msg) => {
        console.log('Received: ' + msg);
    });

    socket.send('something');
});

这是客户端：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet, …

我正在使用带有React Native的WebSocket,并且有一些问题.当我刷新应用程序时,我发现之前的WebSocket连接(在刷新之前使用)仍然存在,并且未正确关闭.每次我重新加载应用程序时,它都会建立新的连接.然后我关闭了应用程序,它将所有连接一起释放.

当我使用浏览器测试几乎相同的代码时,当我刷新页面时,套接字会自动关闭并在页面加载时创建新的Websocket.

如果生产环境中仍存在此问题,则可能非常关键.

这是服务器端代码(我使用了express-ws):

const sockets = {};

app.ws('/', (socket, req) => {
    // Generate unique id to socket and save to socket list
    const uid = uuid.v4();
    socket.uid = uid;

    console.log(`Socket ${uid} connected.`);
    sockets[uid] = socket;

    socket.on('message', (data) => {
        broadcast(data);
    });
    socket.on('close', () => {
        console.log(`Socket ${uid} disconnected.`);
        delete sockets[uid];

        broadcast({
            type: 'plain',
            message: `User ${socket.username} leaved the channel.`
        });
        socket = null;  // make sure to remove socket
    });
});

服务器只保存已连接的WebSocket,并在关闭时将其删除.你可以看到我记录了我在连接时创建的Socket id,用于识别每个websocket方便,它看起来像这样(使用node-uuid):

Socket d0b62d3a-2ed9-4258-9d2d-e83a3eb99e6c disconnected.

好的,当我使用Web浏览器测试此服务器时,它运行良好.每次刷新成功都是关闭套接字并创建新套接字. …

我正在使用browserify和babel来转换和捆绑我的脚本.问题是当我使用React 16时,它给了我这个错误信息:

未捕获的错误:Minified React错误#200; 访问http://facebook.github.io/react/docs/error-decoder.html?invariant=200获取完整信息,或使用非缩小开发环境获取完整错误和其他有用警告.

我知道什么是意义,但我已经处于开发模式,而不是生产.

// gulpfile.js
const isProduction = config.environment === 'production';

if(isProduction) {
    process.env.NODE_ENV = 'production';
}
else {
    process.env.NODE_ENV = 'development';
}

console.log(process.env.NODE_ENV);    // it saids: development

function buildJs() {
    let bopts = {
        paths: [
            `${SRC_DIR}/js`,
            `${SRC_DIR}/scss`
        ],
        debug: true
    };
    let opts = Object.assign({}, watchify.args, bopts);

    let b = watchify(persistify(opts))
    .add(`${SRC_DIR}/js/index.js`)
    .on('update', bundle)
    .on('log', gutil.log)
    .transform(babelify, { 
        presets: ["es2015", "react"]
    })
    .transform(scssify, {
        autoInject: true
    });

    function bundle() {
        let stream = …

我使用Electron时遇到了麻烦.正如你可以看到标题,当我加载远程模块时,它说它是未定义的.这是条目js的代码:

const electron = require('electron');
const { app, BrowserWindow, Tray, remote, ipcMain } = electron;

function initApp() { ... }

app.on('ready', () => {
    initApp();

    console.log(electron);         // object, but no remote inside
    console.log(electron.remote);  // undefined
    console.log(remote);           // undefined
});

我试图在这里遵循官方文件:http://electron.atom.io/docs/api/remote/

同

const { remote } = electron;
const { BrowserWindow } = remote;

let win = new BrowserWindow({width: 800, height: 600});  // error! BrowserWindow is not a constructor blabla

...
remote.getCurrentWindow().focus();

我不知道我错过了什么.任何建议都会非常感激.

我正在使用亚马逊linux,我按照一些步骤使用了谷歌搜索中容易找到的letsencrypt,但所有这些都失败了:

Error: couldn't get currently installed version for /root/.local/share/letsencrypt/bin/letsencrypt: 
Traceback (most recent call last):
  File "/root/.local/share/letsencrypt/bin/letsencrypt", line 7, in <module>
    from certbot.main import main
  File "/root/.local/share/letsencrypt/local/lib/python2.7/dist-packages/certbot/main.py", line 11, in <module>
    import zope.component
  File "/root/.local/share/letsencrypt/local/lib/python2.7/dist-packages/zope/component/__init__.py", line 16, in <module>
    from zope.interface import Interface
ImportError: No module named interface

我所做的是:

# git clone https://github.com/letsencrypt/letsencrypt /opt/letsencrypt
# /opt/letsencrypt/letsencrypt-auto --debug

而已.所以我试着解决这个问题,但是我找到的几十个解决方案都不适用于我.

大多数人说试试这个:

取消设置PYTHON_INSTALL_LAYOUT

但仍然有同样的错误,没有任何变化.有人说,输入这个:

pip install --upgrade pip

但是输入之后,我再也不能使用pip,它失败了某种命令找不到错误,所以我重新创建了我的服务器.

我也试过使用CertBot,但它给了我完全相同的错误!

我正在使用Linux 4.4.51-40.58.amzn1.x86_64 x86_64,需要帮助.我花了差不多一天,但没有任何进展.

我发现的每一个解决方案都没有给我工作.任何建议都会非常感激.