React项目报错×未処理の拒否(エラー):最大更新深度を超えました。これは、コンポーネントが

開発プロセスのコードは次のようになります

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に括弧を追加する必要があるかどうかの問題バインディング機能

2つの解決策があります

1.ES6矢印関数を使用します

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

2.別のメソッドを記述してから、メソッド名を渡します(これは単なる記述方法ですが、パラメーターが異なるため、パラメーターを変更する必要があります)

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

記事に誤りがある場合は、批判して訂正することを歓迎し、それについて議論することを歓迎します。

おすすめ

転載: blog.csdn.net/qq_44606064/article/details/109402606