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

Question

私の義理の義理が私にReactを学ぶ言い訳をするよう求めているウェブサイトを使用しています。私は自然なJavaScript開発者（バックエンドでは幸せ）ではなく、おそらく私のコードにいくつかの再帰的な要素があることを知っていますが、私はそれを見ることができません。誰かが私が間違っていることを教えてもらえますか？あなたは

onClick={ this.changeCurrentBook(publication) } 

を書く場合

import React, { Component } from 'react'; 
import { Container, Segment, Grid, Image, Card, Divider, Header } from 'semantic-ui-react'; 
import publicationData from '../data/publicationData'; 

const Publication = (props) => (
    <Card> 
     <Image src={props.img_url} style={{ height: "350px", width: "auto", margin: "15px auto"}}/> 
     <Card.Content style={{textAlign: "center"}}> 
     <Card.Header >{props.title}</Card.Header> 
     </Card.Content> 
    </Card> 
); 



class Publications extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { books: publicationData, currentBook: publicationData[0] }; 
     this.changeCurrentBook.bind(this); 

    } 
    changeCurrentBook(e) { 
     this.setState({ currentBook: e }); 
    } 
    render() { 
    return(
      <Segment basic> 
       <Container> 
        <Grid stackable> 
         <Grid.Row divided> 
          <Grid.Column width={8}> 
           <Image src={ this.state.currentBook.img_url } centered/> 
          </Grid.Column> 
          <Grid.Column width={8} verticalAlign="middle"> 
           <Header content={ this.state.currentBook.title} /> 
           <p>{ this.state.currentBook.blurb }</p> 
          </Grid.Column> 
         </Grid.Row> 
        </Grid> 
        <Grid.Row> 
        <Divider /> 
        <Grid.Column> 
         <Card.Group itemsPerRow={4} doubling stackable> 
          { this.state.books.map((publication) => { 
            return (
            <Publication 
             title={publication.title} 
             blurb={publication.blurb} 
             img_url={publication.img_url} 
             key={publication.title} 
             onClick={ this.changeCurrentBook(publication) } 
            /> 
           ) 
           }) 
          } 
         </Card.Group> 
        </Grid.Column> 
        </Grid.Row> 
       </Container> 
      </Segment> 
     ); 
    } 
} 

export default Publications; 

Answer 1

機能がすぐに実行され、計算された値がonClickに渡されます。 必要なのは、クリックすると呼び出される関数をすぐに返すコードを実行することです。これを行うには、更なる改良として

onClick = {() => this.changeCurrentBook(publication)} 

に

onClick={ this.changeCurrentBook(publication) } 

からあなたPublicationコンポーネント内onClick呼び出しを変更するには、それはレンダリングの内側に矢印の機能を書くことは、いくつかのパフォーマンスに影響を持っていることは注目にも価値があります。実際には、Publicationコンポーネントがレンダリングされるたびに、新しい同じonClickファンクションが生成され、コンポーネントが強制的に再レン​​ダリングされます。

のは、クリック時に呼び出される関数を返すためにハンドラを変更でき、余分な無用のレンダリングを避けるために：私たちはrenderメソッドを内部で任意の矢印機能を必要としないと我々はしません

changeCurrentBook(e) { 
    return function() { 
    this.setState({ currentBook: e }); 
    } 
} 

この方法余分なレンダリングを持っている：

onClick={ this.changeCurrentBook(publication) } 

は更なる説明のためにhereを参照してください。

Answer 2

はまた、あなたがするかどうかをチェックするために、関数 `changeCurrentBook`内のloggingステートメントを追加してください可能性があり、この

constructor(props) { 
    super(props); 
    this.state = { books: publicationData, currentBook: publicationData[0] }; 
    this.changeCurrentBook = this.changeCurrentBook.bind(this); 
}