20190119杂七杂八-白红宇

node项目出现HTTP500(Internal Server Error)

这个表明客户端没有问题，是服务器端出了问题，后来发现是服务器端代码出现了问题，我将console.log写成console了。可以通过网页的调试面板中network项来查看axio请求的状态码为500，然后定位那个请求就可以找出哪里出错了。

Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use

解决办法：在eslint配置文件中添加配置项

"parserOptions": {      "ecmaFeatures": {        "legacyDecorators": true      }    },复制代码

react如何更新state中数组中的某个元素

遇到一个问题是如何更新state中数组中的某个元素，之前尝试的做法是this.state.psytest[j++]=e.target.value,这种写法明显就是错误的，必须要写成下面的形式

var items=this.state.psytest;        items[(this.state.j)++]=e.target.value;        this.setState({            psytest:items        })复制代码

react报错 TypeError: Cannot read property 'setState' of undefined

这个一般就是没有绑定this。在构造函数里绑定this即可，类似下面

this.handleClick=this.handleClick.bind(this);

React中input的值如何获取

一般是利用DOM提供的Event对象的target事件进行取值

handleChange(e){        this.setState({            value:e.target.value        })    }复制代码

而且要注意，函数参数一般就e一个，不要再额外添加参数，例如

handleChange(key,e){        this.setState({            [key]:e.target.value        })    }复制代码

一般我们处理不同的key时，需要构建不同的handleChange函数，例如

handleChangeUsername=(event)=>{        var val=event.target.value;        this.props.state.username=val;    };    handleChangeIdcard=(event)=>{       var val=event.target.value;        this.props.state.idcard=val    };    handleChangeAge=(event)=>{       var val=event.target.value;        this.props.state.age=val;    };复制代码

另一种方法是使用ref属性并通过参考值this.refs

render: function() {    return (
            
         
    
);},submitForm: function(e) {    e.preventDefault();    alert(React.findDOMNode(this.refs.theInput).value);}复制代码

Reat组件中大量通过import引入图片

这样会使组件看起来很冗余

一个比较好的方法是在public/images/psytest文件下新建一个index.js文件，里面写成

export {
   default as p1} from './1.png'export {
   default as p2} from './2.jpg'export {
   default as p3} from './3.png'export {
   default as p4} from './4.png'export {
   default as p5} from './5.png'.......复制代码

然后我们在要使用这些图片的组件里

import * as images from '../../../public/images/psytest' const{p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12,p13,p14,p15,p16,p17,p18,p19,p20,p21,p22,p23,p24,p25,p26}=images;//通过解构赋值，我们就可以使用单个图片了复制代码

这种方法只是将冗余的代码放在了另外的地方，使组件看起来比较干净，还有一种解决方法,即利用****

const requireContext = require.context("./images", true, /^\.\/.*\.png$/);const images = requireContext.keys().map(requireContext);复制代码

jsx书写的几个注意的地方

一个是this.setState的写法,小括号里面是一个对象，所以要用{}

//正确this.setState({
   value:e.target.value})//正确，带回调函数this.setState({    value:e.target.value},this.handleClick)//错误，缺少{}this.setState(value:e.target.value)//错误，分号多余this.setState({
   value:e.target.value;})复制代码

下面this.props.state[key]=val这种写法也是要注意的

//父组件class Parent extends Component{    constructor(){        super();        this.state={            ...            username,            ...        }    }        render(){        return(        
            )    }}复制代码

//子组件class Son extends Component{    ...    handleChange(key,val){        //要注意这个地方，this.props.state.[key]这样写是不对的        this.props.state[key]=val;    };    ...  }复制代码

JS match函数的返回值

match函数的用法如下，里面可以是一个字符串或者是要匹配的模式的RegExp对象。

stringObject.match(searchvalue)stringObject.match(regexp)复制代码

那么这个函数的返回值是什么呢？

返回匹配结果的数组，该数组的内容依赖于regexp是否具有全局标志g。

**如果regexp没有标志g,**那么match方法就只能在stringObject中执行一次匹配。如果没有找到任何匹配的文本，match将返回null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第0个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index属性声明的是匹配文本的起始字符在stringObject中的位置，input属性声明的是对stringObject的引用。

如果regexp具有标志g,则match将执行全局检索，找到stringObject中的所有匹配子字符串。若没有找到任何匹配的子串，则返回null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是stringObject中所有的匹配子串，而且也没有index属性或input属性。

//下面输出：1，2，3 //rs= Array('A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e');var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";var regexp = /[A-E]/gi;（i 指不区分大小写）var rs = str.match(regexp);复制代码

前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

复制代码

path-to-regexp工具库的用法

该库用来处理url中地址与参数，JS中有RegExp方法做正则表达式检验，而path-to-regexp可以看成是url字符串的正则表达式

pathToRegexp()

作用：这里这个方法可以类比于 js 中 new ExpReg('xxx')。

var pathToRegexp = require('path-to-regexp')var re = pathToRegexp('/foo/:bar')console.log(re);    //打印结果为: /^\/foo\/((?:[^\/]+?))(?:\/(?=$))?$/i复制代码

要注意的是它返回的keys数组里面的东西

const regexp = pathToRegexp('/:foo/:bar')// keys = [{ name: 'foo', prefix: '/', ... }, { name: 'bar', prefix: '/', ... }] re.exec('/test/route')//=> ['/test/route', 'test', 'route']复制代码

exec()

作用：匹配 url 地址与规则是否相符

var pathToRegexp = require('path-to-regexp')var re = pathToRegexp('/foo/:bar');     // 匹配规则var match1 = re.exec('/test/route');    // url 路径var match2 = re.exec('/foo/route');     // url 路径console.log(match1);console.log(match2);//打印结果如下，上述代码中，第一个 url 路径与匹配规则不相符返回 null，第二个 url 路径与匹配规则相符，返回一个数组。null[ '/foo/route', 'route', index: 0, input: '/foo/route' ]复制代码

要注意它返回的内容

re.exec('/test')//=> ['/test', 'test', undefined] re.exec('/test/route')//=> ['/test', 'test', 'route']复制代码

parse()

作用：解析 url 字符串中的参数部分（:id）

var pathToRegexp = require('path-to-regexp');var url = '/user/:id';console.log(pathToRegexp.parse(url));//打印结果[ '/user',  { name: 'id',    prefix: '/',    delimiter: '/',    optional: false,    repeat: false,    partial: false,    pattern: '[^\\/]+?' } ]复制代码

说明：返回一个数组，从第二个数据可以就可以得到 url 地址携带参数的属性名称（）。

当然，url 中携带参数出了 :id 这种形式，还有 /user?id=11 这种，使用 parse() 方法解析自行查看结果。

compile()

作用：快速填充 url 字符串的参数值

var pathToRegexp = require('path-to-regexp')var url = '/user/:id/:name'var data = {
   id: 10001, name: 'bob'}console.log(pathToRegexp.compile(url)(data))//打印结果/user/10001/bob复制代码