难以提取反应成分中的id

Question

我可以看到item和item ID，因为它会循环显示在屏幕上，但是当我单击Tile是div并响应样式化组件的任何Tile时，我看不到id的值。

class CategoryOffers extends React.Component {
  passidtopointscreen =(id)=>{
    console.log("id is", id);
    localStorage.setItem('points_id',id);

    this.props.history.push('/marketplacepoints')
     debugger
   }
  render() {
    debugger
    return (
      <Wrapper>
        {this.props &&
          this.props.cards_data &&
          this.props.cards_data.map(item => {
            return (
              <Tile onClick={(item)=>this.passidtopointscreen(item.id)}>
                <ImageWrapper>
                  <Image src={item.logo} height={'24px'} width={'73px'} />
                </ImageWrapper>
                <CardString>{item.offer_summary}</CardString>
              </Tile>
            )
          })}
      </Wrapper>
    )
  }
}

Answer 1

由于已经使用箭头函数定义了处理程序passidtopointscreen，因此无需使用this关键字即可访问该函数。

像这样更改onClick处理程序：

return (
  <Tile onClick={() => passidtopointscreen(item.id)}> // this line
    <ImageWrapper>
      <Image src={item.logo} height={"24px"} width={"73px"} />
    </ImageWrapper>
    <CardString>{item.offer_summary}</CardString>
  </Tile>
);