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

匿名用户

像这样编写< code>Publication组件的< code>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);
}

Answer 2

如果你写

onClick={ this.changeCurrentBook(publication) } 

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

onClick={ this.changeCurrentBook(publication) } 

自

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

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

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

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

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

 onClick={ this.changeCurrentBook(publication) }

有关进一步的说明，请参阅此处。