博客

开发过程中的代码是这样的

render() {
    //只有路由组件才可以获取path，这时就需要withRouter
    const path = this.props.location.pathname
    const {navList} =this.props
    return(
     <TabBar className="footer-bottom">
         {
             navList.map((nav)=><Item
                key = {nav.path}
                title={nav.text}
                icon={{uri:require("./images/"+nav.icon+".png")}}
                selectedIcon={{uri:require("./images/"+nav.icon+"-selected.png")}}
                selected={path===nav.path}
                
                //下面就是产生错误的地方
                onPress={this.props.history.replace(nav.path)}
             />)
         }
     </TabBar>

浏览器报错如下：



大体意思就是在重复setstate,

原因就是React在初次渲染页面的时候会执行（this.props.history.replace(nav.path)）这个方法，而这个方法的执行又会导致页面的重新渲染，这样反复执行堆栈就崩溃了。

所以运行项目的时候不需要立刻执行代码，只有点击之后才需要，这就涉及到函数加括号和不加的区别

传送门

js绑定函数需不需要加括号的问题

解决方法有两种

1.用ES6箭头函数

onPress={()=>this.props.history.replace(nav.path)}

2.再写一个方法，然后传入方法名(这里只是提供一种写法，但是参数需要修改一下，因为不一样)

MyOnPress=()=>{
	this.props.history.replace(this.props.nav.path)
}
onPress={this.MyOnPress}

文章若有错误，欢迎大佬批评指正，也欢迎大佬来讨论。