小编eri*_*n30的帖子

VS代码与es6

我的代码中出现了linting错误 'import' is only available in ES6 (use 'esversion: 6').

es6相关的一切都是错误的.不知道我必须配置什么才能让它工作.

visual-studio-code

75
推荐指数
4
解决办法
3万
查看次数

React setState只能更新已安装或安装的组件

我收到以下警告

"警告:setState(...):只能更新已安装或安装的组件.这通常意味着你在未安装的组件上调用了setState().这是一个无操作.请检查ContactPage组件的代码."

当我最初进入联系页面时,第一次就可以了.然后,如果我离开页面并返回,则会抛出警告.

联系页面组件:

import React, { Component, PropTypes } from 'react';
import AppStore from '../../stores/AppStore';
import AppActions from '../../actions/AppActions';
import DataContent from './DataContent';

const title = 'Contact Us';


class ContactPage extends Component {

    constructor(props) {
        super(props);
        this.state = AppStore.getState();
        AppActions.getData();
    }

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  componentWillMount() {
    this.context.onSetTitle(title);
    AppStore.listen(this.onChange.bind(this));
}

componentWillUnmount() {
    AppStore.unlisten(this.onChange.bind(this));
}

onChange(state) {
    this.setState(state);
}

renderData() {
    return this.state.data.map((data) => {
        return (
            <DataContent key={data.id} data={data} />
        )
    })
}

  render() {
    return …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

22
推荐指数
2
解决办法
3万
查看次数

React Redux意外密钥传递给创建商店

我收到了错误 Unexpected key "characters" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "marvelReducer", "routing". Unexpected keys will be ignored.

rootReducer:

 import { combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux';
 import marvelReducer from './marvelReducer';

 const rootReducer = combineReducers({
   marvelReducer,
   routing: routerReducer
 });
 export default rootReducer;
Run Code Online (Sandbox Code Playgroud)

marvelReducer:

import { FETCH_MARVEL } from '../constants/constants';
import objectAssign from 'object-assign';

export default function marvelReducer(state = [], action) {
  switch (action.type) {
    case FETCH_MARVEL: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux

13
推荐指数
1
解决办法
9473
查看次数

Angular UI选择不显示

我目前正在使用ui-select(https://github.com/angular-ui/ui-select)进行下拉菜单.我在index.html文件中包含了select.js和select.css.我还通过凉亭安装了角度消毒装置.

这就是我的控制器的样子:

use strict';

angular.module('myApp.home', [  'ui.select',     'ngSanitize']).controller('ScheduleCtrl', ScheduleCtrl);
ScheduleCtrl['$inject'] = [ '$stateParams', '$state' ];
function ScheduleCtrl($stateParams, $state) {
    var vm=this;

    vm.itemArray = [
                    {id: 1, name: 'first'},
                    {id: 2, name: 'second'},
                    {id: 3, name: 'third'},
                    {id: 4, name: 'fourth'},
                    {id: 5, name: 'fifth'},
                ];

    vm.scheduleEvents = [{
        id:1,
        name:'Event1'
    },
    {
        id:2,
        name:'Event2'
    }];

}
Run Code Online (Sandbox Code Playgroud)

我的观点包含:

<ui-select ng-model="selectedItem">
    <ui-select-match>
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in (vm.itemArray | filter: $select.search) track by item.id">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
</ui-select>
Run Code Online (Sandbox Code Playgroud)

但是,我的视图是空白的,它似乎没有达到ui-select指令.

javascript angularjs angular-ui angular-ui-select

6
推荐指数
1
解决办法
1465
查看次数

ReactJS 水平对齐 material-ui 元素

我试图在文本输入旁边有一个单选按钮,因此基本上用户可以输入问题的“答案”并标记为首选。但是,Material-UI 将每个都放在自己的行上。

这是我目前拥有的:

<div>
   <RadioButton
      value="light"
   />
   <TextInput
       hintText="Answer"
       multiLine = {true}
   />
</div>
Run Code Online (Sandbox Code Playgroud)

css reactjs material-ui

6
推荐指数
2
解决办法
3万
查看次数

React Redux将状态作为道具传递给组件

在我的React Redux应用程序中,当主页面加载时,我想从API获取数据并显示它供用户查看.正在从操作中获取数据,并且正在更新状态.但是,我没有将该州视为该组成部分的支柱.不确定什么没有正确连接.

家庭组件:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/actions';
import '../styles/homeStyles.css';

class Home extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.actions.fetchMovies();
  }

  render() {
    const { movies, isFetching, errorMessage } = this.props;

    if (isFetching && !movies.length) {
      return <p>Loading...</p>;
    }

    //will display movies when I have access to state
    return (
      <div>
        <h1>React Starter App</h1>
        <h2>This is the …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux

6
推荐指数
1
解决办法
9480
查看次数

没有'Access-Control-Allow-Origin'反应Express Docker应用

我正在使用docker运行前端React应用程序和节点/表达api。react应用正在运行,localhost:3000而api正在运行localhost:9000。它们都是功能全面且可以正常工作的应用程序。但是,当我尝试从React应用程序拨打电话给http://localhost:9000/api/whatever我时,出现以下错误

XMLHttpRequest cannot load http://localhost:9000/api/schedule. No
Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:3000' is therefore not allowed access.`
Run Code Online (Sandbox Code Playgroud)

这是我的express api的server.js文件:

const express = require('express');
const port = process.env.PORT || 9000;

const app = express();

require('./app/routes')(app);
app.use(function(req, res, next) {
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true …
Run Code Online (Sandbox Code Playgroud)

javascript node.js express docker reactjs

5
推荐指数
1
解决办法
3002
查看次数

反应独特的关键道具

我知道这个问题有很多答案,但我找不到一个能解决我问题的答案.我收到以下错误:Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of QuestionItem. See https://fb.me/react-warning-keys for more information.

我正在为组件设置一个键,但我无法得到警告消失.

主要成分:

renderData() {
        return this.state.data.map((data) => {
            return (
                <QuestionItem key={data._id} data={data} delete={this.deleteItem} edit={this.editItem} />
            )
        })
    }
Run Code Online (Sandbox Code Playgroud)

QuestionItem组件:

import React, { Component, PropTypes } from 'react';
import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
import CardMedia from 'material-ui/lib/card/card-media';
import CardTitle from 'material-ui/lib/card/card-title';
import FlatButton from 'material-ui/lib/flat-button';
import CardText …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

4
推荐指数
1
解决办法
3854
查看次数

将日期和时间转换为 UTC

我要求用户在我的应用程序中输入日期和时间。用户将根据他们所在的时区输入时间。当我将此日期和时间保存到数据库时,我想将时间转换为 UTC,这样当我按时间查询(以 UTC 完成)时,我可以找到条目。

这就是我目前所做的:

var date = new Date();
var dateString = "0" + (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear() + " " + time;
//format date
date = moment(dateString, "MM/DD/YYYY HH:mm a");
date = new Date(date).toISOString();
Run Code Online (Sandbox Code Playgroud)

其中 time 是用户输入的时间(例如,如果我想在上午 11:00 安排某项活动,则时间 = 11:00am)

当它保存到数据库时,它看起来像 : ISODate("2016-05-09T11:00:00Z")这是不正确的,因为这是保存为祖鲁时间的 EST。

如何将时间(我正在使用时刻)转换为正确的祖鲁时间?

javascript datetime datetime-format momentjs

0
推荐指数
1
解决办法
3万
查看次数

在 setTimeout 函数中访问类变量

我有一个必须经常发布事件的 JavaScript 类。代码如下所示:

class TimerService {
  constructor(BroadcastService) {
    this.Broadcast = BroadcastService;
    this.timeout;
    this.warningTimer;
    this.startTimer();
  }

  startTimer() {
    clearTimeout(this.timeout);
    clearTimeout(this.warningTimer);
    this.timeout = setTimeout(this.startWarning, 30000);
  }

  startWarning() {
    this.Broadcast.send("timeout-warning");
    this.warningTimer = setTimeout(this.logout, 60000);
  }

  logout() {
    this.Broadcast.send("session-expired");
  }
}

export default { service: TimerService, name: "TimerService" };
Run Code Online (Sandbox Code Playgroud)

问题是,在 setTimeout 回调函数中,this范围指向window所以我无法访问this.Broadcast. 什么是构建它的最佳方式,以便我可以访问我需要的一切?

javascript angular

0
推荐指数
1
解决办法
1282
查看次数