Javascript React-超过最大调用堆栈大小

我用我岳父让我建立的一个网站作为学习的借口。我不是一个天生的JavaScript开发人员（在后端更快乐），我知道下面的代码中可能有一些递归元素，但我就是看不到。谁能告诉我我做错了什么

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;

import React，{Component}来自'React'；
从“语义ui react”导入{容器、段、网格、图像、卡片、分隔符、标题}；
从“../data/publicationData”导入publicationData；
常量发布=（道具）=>(
{props.title}
);
类发布扩展组件{
建造师（道具）{
超级（道具）；
this.state={books:publicationData，currentBook:publicationData[0]}；
this.changeCurrentBook.bind（this）；
}
兑换簿（e）{
this.setState（{currentBook:e}）；
}
render（）{
返回(
{this.state.currentBook.blurb}

{this.state.books.map（（出版物）=>{
返回(
)
}) 
}
);
}
}
导出默认出版物；

如果您编写

onClick={ this.changeCurrentBook(publication) } 

该函数将立即执行，计算值将传递给

onClick

。 您需要的是运行一个代码，该代码立即返回一个函数，该函数将在单击时调用。为此，请在

出版物中的
组件中更改
onClick
调用

onClick={ this.changeCurrentBook(publication) } 

到

作为进一步的改进，还值得注意的是，在渲染中编写箭头函数会影响性能。事实上，每次渲染
Publication
组件时，它都会生成一个新的相同的
onClick
函数，这反过来会强制组件重新渲染

为了避免额外的无用渲染，让我们更改处理程序以返回一个函数，该函数将在单击时调用：

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

这样，我们在渲染方法中不需要任何箭头函数，也不会有任何额外的渲染：

 onClick={ this.changeCurrentBook(publication) }

有关更多说明，请参阅。
，如果您写

onClick={ this.changeCurrentBook(publication) } 

该函数将立即执行，计算值将传递给
onClick
。
您需要的是运行一个代码，该代码立即返回一个函数，该函数将在单击时调用。为此，请在
出版物中的
组件中更改
onClick
调用

onClick={ this.changeCurrentBook(publication) } 

到

作为进一步的改进，还值得注意的是，在渲染中编写箭头函数会影响性能。事实上，每次渲染
Publication
组件时，它都会生成一个新的相同的
onClick
函数，这反过来会强制组件重新渲染

为了避免额外的无用渲染，让我们更改处理程序以返回一个函数，该函数将在单击时调用：

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

这样，我们在渲染方法中不需要任何箭头函数，也不会有任何额外的渲染：

 onClick={ this.changeCurrentBook(publication) }

请参阅以获取进一步的解释。
像这样编写
出版物
组件的
onClick

<Publication 
   title={publication.title}
   blurb={publication.blurb}
   img_url={publication.img_url}
   key={publication.title}
   onClick={ () => this.changeCurrentBook(publication) }
/>

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

像这样编写您的
出版物
组件的
onClick

<Publication 
   title={publication.title}
   blurb={publication.blurb}
   img_url={publication.img_url}
   key={publication.title}
   onClick={ () => this.changeCurrentBook(publication) }
/>

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

谢谢，这阻止了超过最大调用堆栈大小。不幸的是，代码似乎没有达到我想要的效果——onClick没有更新页面。你有没有可能也看到那里出了什么问题？一旦时间限制进展，我会接受你的答案。一个小的解释会很好的补充，这样OP就会明白他在哪里犯了错误。解释得很好。为性能改进的解释干杯。谢谢，这阻止了超过最大调用堆栈大小。不幸的是，代码似乎没有达到我想要的效果——onClick没有更新页面。你有没有可能也看到那里出了什么问题？一旦时间限制进展，我会接受你的答案。一个小的解释会很好的补充，这样OP就会明白他在哪里犯了错误。解释得很好。也为性能改进的解释干杯。请您在函数
changeCurrentBook
中添加一条日志语句，以检查在
onclick
事件中是否执行它。@RaghavGarg很好，它甚至没有启动。因此，将
onClick
添加到
Publication
组件时，您只是传递了另一个道具；您必须在
出版物
组件中使用它（绑定）到某个
元素
，才能真正启动它。@RaghavGarg鉴于这个问题在技术上已经得到了回答，我可能会将当前的问题转移到一个新的问题上来，以免把这个问题弄得一团糟。请在函数
changeCurrentBook
中添加一条日志语句，以检查它是否在
onclick
事件中执行。@RaghavGarg很好，它甚至没有启动。因此，将
onClick
添加到
Publication
组件时，您只是传递了另一个道具；您必须在
出版物
组件中使用它（绑定）到某个
元素
，才能真正启动它。@RaghavGarg鉴于这个问题在技术上已经得到了回答，我可能会将当前的问题转移到一个新的问题上