小编Ful*_*rid的帖子

所以我试图建立一个非常基本的用户登录。我正在尝试创建一个用户，然后使用这些凭据登录并取回 JSON Web 令牌。我被卡住的地方是尝试比较密码然后发送响应。

脚步：

创建用户：

1. 输入电子邮件和密码
2. salt/hash 用户密码
3. 将用户存入数据库
4. 返回成功

登录

1. 通过请求电子邮件值查找用户
2. 如果找到比较密码
3. 密码好发送 JSON Web 令牌

用户模型

email:{ 
  type: String,
  required: true,
  unique: true
},
password: {
  type: String,
  required: true
}

用户路线

var express     = require('express');
var router      = express.Router();
var jwt         = require('jsonwebtoken');
var bcrypt      = require('bcryptjs');

// Create User
...
bcrypt.genSalt(10, function(err, salt) {
    bcrypt.hash("superSecret", salt, function(err, hash) {
      user.password = hash;
      user.save();
      res.json({success: true, message: 'Create user successful'});
    });
  });
...

// Login
... …

我有一个模型,在第一次POST后不断出错.我正在创建一个X天的调度应用程序,包括房间和房间的时间段.

我遇到的问题是在数据库中创建Day Objects.为了便于阅读,我将只有一个键值对

day.model.js

var mongoose = require('mongoose');

// Day Schema
var daySchema = mongoose.Schema({
  name:{
    type: String,
    required: true,
  },
  createdAt:{
    type: Date,
    default: Date.now
  }
});

var Day = module.exports = mongoose.model('Day', daySchema);

// Get all Days
module.exports.getDays = function(callback, limit){
  Day.find(callback).limit();
};

// Add Day
module.exports.addDay = function(day, callback){
  var add = {
    name: day.name,
};
Day.create(add, callback);
};

day.routes.js

var express     = require('express');
var router      = express.Router();
var jwt         = require('jsonwebtoken');
var config      = require('../config/database');

Day …

有一个Search组件,当有效负载返回时重定向到Results组件.希望结果组件使用React Router v4 Redirect显示已通过的搜索状态.我在Docs中的假设是state: { referrer: currentLocation }可以传递使用对象.

搜索

export default class Search extends Component{
  constructor(props){
    super(props);
      this.state = {
        searchValue: '',
        results:[]
      }
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  handleKeyPress = (e) => {
    let searchParam = e.target.value;
    if (e.key === 'Enter'){
      axios
        .get(URL+searchParam)
        .then((response) => {
          this.setState({results: response.data});
        });
    }
  };

  render(){
    return(
      <div>
        <input
          ref="search"
          type="text"
          placeholder="Search"
          onKeyPress={this.handleKeyPress.bind(this)}
        />
        {this.state.results.length > 0 &&
          <Redirect to={{
            pathname: '/results',
            state: { results: this.state.results }
          }} />
        } …

抱歉造成任何混乱。简而言之，我想用无序列表制作几个标题。

<h3>level_3 key title</h3>
<ul>
  <li>level_4 value</li>
  <li>level_4 value</li>
</ul>

<h3> another level_3 key title</h3>
<ul>
  <li>level_4 value</li>
  <li>level_4 value</li>
</ul> 

很难将问题表述为问题。本质上，尝试解析一些 JSON 并正确显示数据非常困难。我想做的是将level_3.x 下面显示为顶级列表项，将嵌套显示level_4.x为嵌套列表项。使用 React 来明确

例子：

• 密钥来自level_3.1
  • 字符串来自level_4.1
  • 字符串来自level_4.2

对每个level_3.x对象重复

示例数据

"level_1":{
  "level_2.1":{
    "level_3.1":{
     "level_4.1":["string","string","string"],
     "level_4.2":["string","string","string"]
    }
    "level_3.2":{
     "level_4.1":["string","string","string"],
     "level_4.2":["string","string","string"]
    }
  }
  "level_2.2":{
     "level_3.1":{
       ... Same as above
    }
     "level_3.2":{
       ... Same as above
    }
  }
}

根据我的理解，因为你只能映射一个数组，所以我所做的就是尝试遍历level_3.x并将它们推送到数组中。我可以对其进行映射并按预期显示项目。

父组件

render(){
  return( <Child heading="A" data={resource.data} /> )
} …

遇到React Router v4渲染组件的问题.在初始加载应用程序时,它将呈现与URL对应的正确组件.但是,任何后续Link点击都不会呈现所需的组件.

图书馆

• 反应路由器:4.2.2
• 反应:15.6.1
• 反应DOM:15.6.1
• - 只是在影响的情况下提及图书馆 -
  • React Redux:5.0.6
  • Redux:3.7.2
  • 材质用户界面:0.19.0

imports为了简洁,省略一些

网站结构

index.jsx
  |
  App.jsx
    |
    Auth.jsx
      |
      Layout.jsx
        <Routes />   

index.jsx

import React from 'react';
import store from './store.js';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();

import App from './containers/App.jsx';

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider muiTheme={muiTheme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </MuiThemeProvider>
  </Provider>,
  document.getElementById('root')
);

App.jsx

import …

Apollo从Rails后端获取内容时遇到了一个令人沮丧的问题。这个问题似乎正在解决在我的Apollo项目中使用CORS的问题。

科技类

• 阿波罗客户：1.9.3
• 图表质量：0.11.7
• 反应：15.6.1
• 反应阿波罗：1.4.16

cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins `*`

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

导轨在端口3001上运行 rails s -p 3001

有了这个后端，您可以发出curl请求，一切都会按预期进行

工作卷发

curl -X POST -H "Content-Type: application/json" -d '{"query": "{users{first_name}}"}' http://localhost:3001/graphql

这将返回预期数据

因此，所有这些都指向Apollo和应用程序前端的问题。

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-client';
import { ApolloProvider, createNetworkInterface } from 'react-apollo';

import App from './containers/App.jsx';

const client = new ApolloClient({
  networkInterface: …

Angular的新手,以及如何做"Angular Way"的事情.我想要做的就是单击一个按钮在视图中显示隐藏元素,然后隐藏单击的按钮.任何帮助都是极好的.

HTML:

<button class="btn btn-primary" ng-click="showDiv=true; hideMe()">
  Show Div
</button>
<div ng-show="showDiv">
  I was hidden now you see me, but how do I hide the button?
</div>

控制器:

  $scope.hideMe = function(){
    console.log('hide the button');
    $scope.hide();
  }

代码示例:Plunker

理想情况下想要合并

ng-hide

运行 Airbnb 的 Eslint Config 并在使用扩展时遇到问题.jsx。

索引.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.jsx'; <<<<<<<<< Unexpected use of file extension "jsx"...

require('./index.scss');

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
document.getElementById('root'),
);

所以查了一下，发现了另一个SO，它与Restrict file extensions that might contains JSX结合使用

好的，所以更新了我的.eslintrc规则以反映这一点

.eslintrc

{
  "extends": "airbnb",
  "env":{
    "browser": true
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "indent": [2, …

我有一个名为的组件Typography，它接受一个variantprop 并相应地渲染一个元素。

Typography.js

为了简洁省略了很多

import { StyledH1, ... } from './Typography.styles';

const variantMapping = {h1: StyledH1, ...};

const Typography = ({ children, ...props }) => {
  const Component = variantMapping[props.variant] ? variantMapping[props.variant] : 'span';

  return <Component {...props}>{children}</Component>;
};

因此，我尝试了多种方法来获得有效的测试。现在我正在尝试传递variant="h1"、返回以下标记<h1 class="..styled component what nots...">...</h1>并验证<h1>渲染

Typography.spec.js

import { mount } from 'enzyme';
import Typography from '.';

describe('<Typography />', () => {
  it('renders H1', () => {
    const wrapper = mount(<Typography variant="h1" />); …

因此,我正在查看几个SO问题,每个示例都与基于类的组件有关,而不是功能组件.

所以我有一个ListContainer渲染的容器,List我正在通过toggleDrawer().我无法定义toggleDrawer()的List.defaultProps

ListContainer.jsx

import React, { Component } from 'react';
import List from './List';

class ListContainer extends Component{
  constructor(props){...}
  const toggleDrawer = () => {...}
  render(){
    return(
      <List data={data} toggleDrawer={toggleDrawer}/>
    )
  }
}

...export statement...

List.jsx

import React from 'react';
import PropTypes from 'prop-types';

function List(props){
  const { data, toggleDrawer } = props;
  const openDrawer = () => toggleDrawer();
  const renderListItems = (items) => {//renders a list};

  return(
    <ul>{renderListItems(data)}</ul>
  )
} …