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都要加,要不然会出现,数据刷新的时候,输入框的值不变
6、使用map方法调用一个组件时,需要加return(组件)
xxx.map((item,index)=>{
return(
<XXX组件 key={index}>{item}</XXX组件>
)
})
7、组件名必须大写,要不然不执行render()里面的内容
官方介绍