Question

我在下面显示了从API检索的啤酒图像。每个图像都有一个handleClick事件，它将把它们定向到有关此啤酒的详细信息页面。我在下面的代码根本不呈现啤酒，而是直接进入随机啤酒的详细信息页面。谁能帮我找出原因？

谢谢

export default class GetBeers extends React.Component {
    constructor() {
        super();
        this.state = {
            beers: [],
            showMethod: false, 
            beerDetails: []
        };
        this.getBeerInfo = this.getBeerInfo.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(details) {
      this.setState({
        showMethod: !this.state.showMethod, 
        beerDetails: details
    });
    }

    render() {
      if(this.state.showMethod) {
        return (
          <Beer details = {this.state.beerDetails}/>
      );
      } 
      else {
        return (
           <div>{this.state.beers.map(each=> {
            return <img className = "img-beer" onClick = {this.handleClick(each)} src={each.image_url}/>
          })}</div>
      );
      }
    }
    
    componentDidMount() {
        this.getBeerInfo()
    }

    getBeerInfo() {
        ...gets info
    }
}

Answer 1

当您像这样使用onClick时，将在渲染器上运行该功能。因此，您必须使用箭头功能：

不起作用：

<img className = "img-beer" onClick = {this.handleClick(each)} src={each.image_url}/>

工作：

<img className = "img-beer" onClick = {() => this.handleClick(each)} src={each.image_url}/>

Answer 2

主要问题是没有正确调用该句柄。

此外，我注意到您正在绑定构造函数中的函数。使用ES6函数创建可能会更简单，因此该类的范围将绑定到您的handle方法。

export default class GetBeers extends React.Component {
    constructor() {
        super();
        this.state = {
            beers: [],
            showMethod: false, 
            beerDetails: []
        };
    }
    handleClick = (details) => {
      this.setState({
        showMethod: !this.state.showMethod, 
        beerDetails: details
    });
    }

    render() {
      if(this.state.showMethod) {
        return (
          <Beer details = {this.state.beerDetails}/>
      );
      } 
      else {
        return (
           <div>{this.state.beers.map(each=> {
            return <img className = "img-beer" onClick = {() => this.handleClick(each)} src={each.image_url}/>
          })}</div>
      );
      }
    }
    
    componentDidMount() {
        this.getBeerInfo()
    }

    getBeerInfo = () => {
        ...gets info
    }
}

HandleClick不会更改状态

2 个答案: