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 (<form onSubmit={this.submitForm}>
<input ref="theInput" />
</form>);
},
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;
//通过解构赋值，我们就可以使用单个图片了
这种方法只是将冗余的代码放在了另外的地方，使组件看起来比较干净，还有一种解决方法,即利用**require.context**
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(
<Son state={this.state} />
)
}
}
//子组件
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
<script type="text/javascript">
var str="1 plus 2 equal3"document.write(str.match(/\d+/g))
</script>
//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);
<body>
<p>
前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
</p>
</p>
<script type="text/javascript">
$(function() {
var arr = new Array(),
str = $('p').text();
//正则表达式无全局标志g
arr = str.match(/(前端)/);
//返回结果数组
console.log(arr);
//返回结果数组长度 本示例结果为：2
console.log('返回结果数组长度：' + arr.length);
//返回结果数组的第一个元素 本示例结果为：前端
console.log('返回结果数组的第一个元素：' + arr[0]);
//返回结果数组的第二个元素 本示例结果为：前端
console.log('返回结果数组的第二个元素：' + arr[1]);
})
</script>
</body>
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 地址携带参数的属性名称（item.name）。
当然，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
