react踩坑--持续更新

1、Route 使用Link跳转，地址改了，组件未加载

原因：匹配及顺序问题

错误的写法：

<Switch>
    <Route path={'/'} component={login} />
    <Route path={'/comment'} component={comment} />
    <Redirect from={"*"} to={'/'} />
</Switch>

正确的写法:

<Switch>
    <Route path={'/comment'} component={comment} />
    <Route path={'/'} component={login} />
    <Redirect from={"*"} to={'/'} />
</Switch>

写法2，使用exact：

• exact是Route的属性，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些。
• exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。
• exact为true时，’/link’与’/’是不匹配的，false的情况下它们又是匹配的。也就是说上面的错误写法中，匹配到第一个了

// 写法2：
<Switch>
    <Route exact path={'/'} component={login} />
    <Route path={'/comment'} component={comment} />
    <Redirect from={"*"} to={'/'} />
</Switch>

2、react-route Link传参

to对象传递，参数被放到this.props.location中

<Link  to={{ pathname: '/path/', query:{name:'sss',age:'20'}}}>title</Link>

Switch 写法

<Switch>
     <Route path='/path/' component={Showcomment}/>
</Switch>

3、this.SetState报错

注意写法：

this.setState({
   xxx:xxx
})

你有可能写错成这样，相当于给对象赋值了就报错了

this.setState=({
   xxx:xxx
})

4、报错-超过最大更新深度

原因：render方法中调用方法导致重新渲染和切换将再次调用并重新渲染，依此类推形成死循环

getData = () => {
	this.setState({
		xxx:xxx
	})
}
// 正确调用写法
render(){
   {this.getData}
}
// 报错写法
render(){
   {this.getData()}
}

5、antd-design input，select框不能输入的问题

原因：初始化给value赋值了，无论输什么都会被value覆盖
解决方法：初始化用defaultValue

defaultValue 和 value都要加，要不然会出现，数据刷新的时候，输入框的值不变

扫描二维码关注公众号，回复： 8583147 查看本文章

6、使用map方法调用一个组件时，需要加return（组件）

xxx.map((item,index)=>{
	return(
		<XXX组件 key={index}>{item}</XXX组件>
	)
})

7、组件名必须大写，要不然不执行render()里面的内容

官方介绍