javascript - React - 超出最大调用堆栈大小

Question

我正在使用我岳父要求我建立的一个网站，作为学习 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;

Answer 1

如果你写

onClick={ this.changeCurrentBook(publication) } 

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

onClick={ this.changeCurrentBook(publication) } 

至

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

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

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

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

这样我们就不需要在渲染方法中使用任何箭头函数，并且我们不会有任何额外的渲染:

 onClick={ this.changeCurrentBook(publication) }

参见here以获得进一步的解释。