React - Uncaught RangeError：最大呼び出しスタックサイズを超えました

Question

私はReact.jsの初心者で、複数のレコードを持つ&州の概念を理解しようとしています。

1. UserData.jsx
私は、ユーザーレコードのthis.state使用

UserData.jsxで

UserDataResult.jsx -

は、私は2つの要素を抱えています。子コンポーネントUserDataResult.jsxを介して表示したいレコードです。

私が間違っていることを知らないので、コンソールログにエラーが表示されます。

エラーは次のとおりです。キャッチされない例外RangeError：最大コールスタックサイズは

を超えコード：

** UserData.jsx **

import React from "react";  
import UserDataResult from "./UserDataResult.jsx";  

class UserData extends React.Component{  

    constructor (props){ 
     super(props); 

     this.state = { 
      users : [ 
       { 
        id : 1, 
        name : "Jack", 
        age : 32, 
        location : "USA", 
        skill : "Drummer", 
       }, 
       { 
        id : 2, 
        name : "Andrew", 
        age : 35, 
        location : "USA", 
        skill : "Guitar player", 
       }, 
      ] 
     }; 

    } 


    render(){  
     return(
      <section> 
       <h6> Headline </h6> 
       <hr /> 

       <div> 

        { 
          this.state.users.map((contact) => { 

           return <UserDataResult contact={contact} />        

          }) 
        } 

       </div>  
      </section> 
     ); 
    } 
} 

export default UserData; 

** UserDataResult.jsx **

import React from "react"; 

class UserDataResult extends React.Component{ 
    render(){ 

     return( 

      <section>  
       <div> 

       <p> 
        {this.props.contact.id} 
        {this.props.contact.name} 
        {this.props.contact.age} 
        {this.props.contact.location} 
        {this.props.contact.skill} 
       </p> 
       </div> 

      </section> 
     ); 
    } 
} 
export default UserDataResult; 

Answer 1

は、あなたのコンストラクタのためにこれを試してみてください：

あなたが適切にダウンコンポーネントに小道具を渡すに反応できるように小道具を含める必要があります。私は正確な理由を思い出すことができません。

constructor(props) {     // you need to include props 
    super(props);      // you need to include it here also 
    this.state = { 
     users = [ 
      { 
       id : 1, 
       name : "Jack", 
       age : 32, 
       location : "USA", 
       skill : "Drummer" 
      }, 
      { 
       id : 2, 
       name : "Andrew", 
       age : 35, 
       location : "USA", 
       skill : "Guitar player" 
      } 
     ] 
    }; 
} 

上記は、配列になるthis.state.usersへのアクセスを提供します。

次に、あなたのコンポーネントでこれを下にしてみてください：

<div> 
    <UserDataResult checkResult={this.state.users} /> 
</div> 

その後、アレイに押し込んで、それを更新することができます。

const newUsersArray = this.state.users.push({ 
     id: 3 
     name: 'Bob Ross' 
     age: 25 
     location: 'Cambodia' 
     skill: 'Maximum' 
    }) 

this.setState({ users: newUsersArray }) 

あなたはそれが24/7不変であるかのような状態を治療する必要があります。

は、あなたがこれを呼び出すことができます何かを作るにしてください。常に更新された値で置き換えてください。

Reactは、舞台裏であらゆる種類のファンシーな比較を行い、パフォーマンスを最適化するのに役立ちます。新しいユーザーをどのようにしてアレイに追加したのか、それをただちに再割り当てしたことに注目してください。

Reduxの世界では、これはリムーダを使用し、状態を直接操作することは100％違法です。

this.state.push()またはstate.users.bob = 'ok'の処理が悪いことを今すぐ忘れないでください。あなたは、私が上記示したものをやりたい、とのようなボブの例は次のようになります。どのようなことがないことである

return { 
    ...state, 
    bob: 'ok' 
} 

はそう、それのすべてを新しいオブジェクトを作成し、それに既存の状態を「広がる」それはであるとしてその時点では、新しいオブジェクトにはbob: 'ok'がプロパティとして追加され、それは後/後に発生するため、優先され、bobという既存のキーを上書きします。

これはもう少し進歩しましたが、リデューサーはpure functionsであることを念頭に置いておいて、Reactを使用することは不可能です。それについていくつかの読書をしてください。

このようなものは、いつ、どこで、なぜコンポーネントがあるのか​​に関係していますre-render。それは、Reactの激しいパフォーマンスの中心にあります。あなたが機能、またはライフサイクルメソッドをレンダリング内部からthis.setState()を呼び出す場合

、SETSTATEは、コンポーネントの再描画をトリガーするためには、無限ループに入ることができる、と再レンダリングは再びSETSTATEをトリガー。