小编Jos*_*ose的帖子

我在React仍然相当新,但我一直在慢慢地磨,我遇到了一些我坚持不懈的事情.

我正在尝试在React中构建一个"计时器"组件,说实话,我不知道我是否正确(或有效).在下面我的代码,我设置状态来返回一个对象{ currentCount: 10 },并已与玩弄componentDidMount,componentWillUnmount和render我只能得到状态,以"倒计时",从10到9.

两部分问题:我出错了什么？并且,是否有更有效的方法来使用setTimeout(而不是使用componentDidMount&componentWillUnmount)？

先感谢您.

import React from 'react';

var Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: 10 };
  },

  componentDidMount: function() {
    this.countdown = setInterval(this.timer, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.countdown);
  },

  timer: function() {
    this.setState({ currentCount: 10 });
  },

  render: function() {
    var displayCount = this.state.currentCount--;
    return (
      <section>
        {displayCount}
      </section>
    );
  }

});

module.exports = Clock;

我在正常激活的表格单元格上有一个onClick(React)处理程序,但是我想维护"在新标签中打开"功能,该功能可以href在标签上为您提供.

当然,尝试将两者结合在一个元素上并不能正常工作:

<td onClick={this.someFunction} href="someLink">
  ...some content
<td>

之前我研究过嵌套在表格单元格中的锚标记跨越整个高度,因此每当右键单击单元格的内容时,我就可以"在新标签中打开"并仍然onClick在表格单元格元素上保留一个处理程序.然而,这里概述了这种方法的各种问题.

TLDR:覆盖会导致其他问题.解决方案存在各种兼容性问

所以我放弃了上面解释的方法./建议的想法？有没有办法在不必使用锚点/ href的情况下选择"在新标签页中打开"？

关于道具和功能组件,我有一个看似微不足道的问题.基本上,我有一个容器组件,它在状态改变时呈现Modal组件,这是由用户单击按钮触发的.模态是一个无状态功能组件,它包含一些输入字段,这些输入字段需要连接到容器组件内部的函数.

我的问题:当用户与无状态Modal组件中的表单字段交互时,如何使用父组件内部的函数来更改状态？我错误地传递道具吗？提前致谢.

容器

export default class LookupForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showModal: false
        };
    }
    render() {
        let close = () => this.setState({ showModal: false });

        return (
            ... // other JSX syntax
            <CreateProfile fields={this.props} show={this.state.showModal} onHide={close} />
        );
    }

    firstNameChange(e) {
      Actions.firstNameChange(e.target.value);
    }
};

功能(模态)组件

const CreateProfile = ({ fields }) => {
  console.log(fields);
  return (
      ... // other JSX syntax

      <Modal.Body>
        <Panel>
          <div className="entry-form">
            <FormGroup>
              <ControlLabel>First Name</ControlLabel>
              <FormControl type="text"
                onChange={fields.firstNameChange} placeholder="Jane"
                />
            </FormGroup> …

我试图弄清楚为什么我正在获取和存储状态的JSON数据没有被映射到我的组件道具,但是当console.log()从mapStateToProps()函数内部编辑时出现.我做错了什么,我没有在这里看到？

编辑:显然,状态上的属性被映射到组件但是嵌套.data从内部登录时mapStateToProps(),必须通过访问该属性state.state.data.在此之前(请参阅reducer),action.data记录时,数据将按预期显示.没有奇怪的筑巢.也许这个connect功能出了什么问题？

查看状态对象中是否填充了状态属性:

以下是我的组件:

class ViewSelector extends Component {
  componentWillMount() {
    this.props.fetchDataAsync('VIEW ALL');
  }

  selectView(event) {
    // this.props.data comes up undefined despite state being mapped
    // to the component props
    console.log('props: ' + this.props.data);
    this.props.filterData(event.target.innerHTML, this.props.data);
  }

  render() {
    return (
      <section>
        <nav>
          <button onClick={this.selectView.bind(this)}>VIEW ALL</button>
          <button onClick={this.selectView.bind(this)}>VIEW LAST WEEK</button>
          <button onClick={this.selectView.bind(this)}>VIEW LAST MONTH</button>
        </nav>
        <Dashboard data={this.props.data}/>
      </section>
    );
  }
}

function mapStateToProps(state) {
  console.log(state); …

我正在尝试编写一个简单的快速服务器,它接收传入的JSON(POST),解析JSON并分配给请求主体.抓住的是我不能使用bodyparser.下面是我的服务器,其中一个简单的中间件函数被传递给app.use

问题:每当我向我的服务器发送虚假POST请求时,superagent(npm包允许你通过终端发送JSON)我的服务器超时.我使用req.on('data')以类似的方式编写了一个HTTP服务器...所以我很难过.有什么建议？

const express = require('express');
const app = express();

function jsonParser(req, res, next) {
  res.writeHead(200, {'Content-Type:':'application/json'});
  req.on('data', (data, err) => {
    if (err) res.status(404).send({error: "invalid json"});
    req.body = JSON.parse(data);
  });
  next();
};

app.use(jsonParser);
app.post('/', (req, res) => {
  console.log('post request logging message...');
});

app.listen(3000, () => console.log('Server running on port 3000'));

我遇到了这个错误: Invariant Violation: Could not find "store" in either the context or props of "Connect(Filters)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Filters)".

应用程序的根看起来像这样:

import { AppContainer } from 'react-hot-loader';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import Root from './Root';
import configureStore from './store/configure-store';

const props = Object.assign({}, JSON.parse(document.getElementById('initial-json').innerHTML));
const reduxProps = { filters: props.filters };
const store = configureStore(reduxProps);

render( …

我无法弄清楚如何配置我的.eslintrc文件以正确"接受"JSX.换句话说,当在Atom中输入JSX时,它会变得怪异.

我添加了"parser": "babel-eslint",因为这似乎是其他人一直在做的调整他们的短信的一部分...但然后我在Atom中得到这个错误:

错误:无法从'/Users/josetello/.atom/packages/linter-eslint/node_modules'中找到模块'babel-eslint'

我在全球范围内安装了babel-eslint --save-dev.没运气.不知道为什么抱怨原子包...

是否有更好的方法为JSX配置.eslintrc？

我的.eslintrc文件:

{
  "settings": {
   "ecmascript": 6
 },
 "ecmaFeatures": {
   "blockBindings": true,
   "jsx": true
 },
 "parser": "babel-eslint",
 "env": {
   "browser": true,
   "jquery": true,
   "node": true,
   "mocha": true,
   "es6": true
 },
 "rules": {
   "prefer-arrow-callback": 1,
   "semi": 1,
   "strict": 0,
   "indent": [2, 2],
   "quotes": [1, "single"],
   "no-multi-spaces": [1, {
     "exceptions": {
       "VariableDeclarator": true,
       "FunctionExpression": true
     }
   }],
   "key-spacing": [0, {"align": "value"}],
   "no-underscore-dangle": 0
 },
 {
  "plugins": [
      "react"
    ]
  }
}

这更多是一个通用的最佳实践问题。

我一直在使用JavaScript Maps到处乱逛，并一直在尝试查找有关是否将其状态属性设置为Map的反模式/代码气味的更多信息。以下链接是Redux存储库中的问题线程，带有一些注释，例如：

“您可以将Maps和Sets用作状态值，但是由于可序列化性问题，不建议使用它。”

但是，该线程与Redux有关。香草反应怎么样？任何人都有强烈的意见或见识？抱歉，这个问题在错误的地方。

https://github.com/reduxjs/redux/issues/1499

我发现了类似的问题,但没有一个明确地回答这个问题,所以我希望有人可以帮我解决这个问题.

关于构造函数,我试图确定变量和函数默认是公共的还是私有的.

例如,我有这个样本构造函数具有以下属性:

function Obj() {
  this.type = 'object';
  this.questions = 27;
  this.print = function() {
    console.log('hello world');
  }
}

我可以这样称呼这些属性:

var box = new Obj();
box.type; // 'object'
box.print(); // 'hello world'

在我看来,默认情况下函数和变量都是公共的.是对的吗？ 或者,如果构造函数内部的函数是私有的......它们只能将私有变量作为参数吗？

谢谢.

首先,如果eslint未在React项目中保存为依赖项,则atom会抛出此错误,并且它会弹出为红色通知.现在我在一个不是 git repo 的目录中工作,每当我尝试输入时它都会不断发出这个错误.这就是我所看到的:

Error: Cannot find module 'babel-eslint'
    at Object.ModuleResolver.resolve (/Users/josetello/.atom/packages/linter-eslint/node_modules/eslint/lib/util/module-resolver.js:75:19)

我已经尝试在原子中更新eslint/babel包,卸载它们,在原子配置文件中查找关于这可能是什么的提示,但没有运气.它让我疯了 - 其他人遇到类似的东西？

我正在研究一个算法问题（在 leetcode 上），该问题要求以下内容：

给定一个包含n不同数字的数组0, 1, 2, ..., n,，查找数组中缺少的数字。

例如，给定nums = [0, 1, 3]return 2。

我目前的答案是：

var missingNumber = function(nums) {
  return nums.filter(function(item, index, arr) {
    return arr[index] - arr[index - 1] > 1;
  }).shift() - 1; 
};

然而，leetcode 正在使用这两个测试用例（以及其他一些），这对我来说没有意义：

输入：[0] 预期：1

输入：[0, 1] 预期：2

编辑：还有...

输入：[1] 预期：0

据我了解，该算法要求返回数组中缺少的单个数字，因为首先存在一个实际上丢失的数字。我在这里遗漏了一些东西还是这个算法的说明非常不清楚？

我正在测试redux-observable与辅助项目一起使用，并且反复遇到此问题：Uncaught TypeError: combineEpics: one of the provided Epics "handleSearchEpic" does not return a stream. Double check you're not missing a return statement!

我已经在线参考了redux可观察的文档和其他一些示例，但是我无法确定可能缺少的内容。以下是我的行动和相关的史诗。

export const searchContent = query => {
  return {
    type: SEARCH_CONTENT,
    query
  }
}

const returnSearchContent = searchResults => {
  return function(dispatch) {
    dispatch({
      type: RETURN_SEARCH_CONTENT,
      searchResults
    });
  }
}

// Epics
export const handleSearchEpic = action$ => {
  action$.ofType(SEARCH_CONTENT)
    .mergeMap(action => axios.get(`...SOME_API_ENDPOINT`))
    .map(res => returnSearchContent(res))
}

export const rootEpic = combineEpics(
  handleSearchEpic
); …