Возникла проблема с событием.

Question

У меня есть 2 ссылки в моем компоненте, одна для отображения деталей продукта, а другая для генерации карты сравнения.

Выборка вызывается в 2 различных функциях, для которых в качестве параметра необходимо передать идентификатор элемента. Если я вызываю его как обычную функцию (onClickProductDetail), выборка запускается несколько раз при рендеринге. ТАК изменил его, чтобы я мог вызывать event.preventDefault (OnCLickCOmpareDetails), но тогда ROuter вообще не рендерит дочерний компонент

Я пробовал 2 разных способа обработки OnClick

handleClickProductDetail (product_id) {
     //event.preventDefault();
     console.log('product_id inside handleClickProductDetail', product_id)
    this.props.fetchProductDetails(product_id);
  }


 handleClickCompareDetail (event,product_id) {
     event.preventDefault();
     console.log('product_id inside handleClickCompareDetail', product_id)
    this.props.fetchCompareDetails(product_id);
 }

  render() {
      //console.log("Prop-items",this.props.items)
      if(this.props.items === undefined ){
            return <center> <p>&nbsp;</p> Please enter a string value to search for items </center>
         }
        return (
        <div>
            <table>
              {this.props.items.map((item, index) => (

                  <td>
                      <p> &nbsp;</p>
                      <p></p>
                      <p>  <img src={item.product_image}/></p>
                       <p>{item.product_title}</p>

                       <HashRouter>
                          <p><Link to={`/Compare/${item.product_id}`} component={CompareCard} onClick={(event)=>this.handleClickCompareDetail(event,item.product_id)}> Compare Prices </Link></p>
                          <p><Link to={`/${item.product_id}`} component={ProductDetail} onClick={this.handleClickProductDetail(item.product_id)}> Product Details </Link></p>
                          <Route exact path={`/Compare/${item.product_id}`} render={()=><CompareCard compare_detail={this.props.compareDetails.data.stores}/>}/>

                          <Route exact path={`/${item.product_id}`} render={()=><ProductDetail product_detail={this.props.productDetails.data.main_specs}/>}/>

                        </HashRouter>
                 </td>


            ))}
            </table>

        </div>
      );

Answer 1

<p><Link to={`/${item.product_id}`} component={ProductDetail} onClick={this.handleClickProductDetail(item.product_id)}> Product Details </Link></p>

В событии onClick вышеприведенного элемента вы фактически вызвали функцию handleClickProductDetail, не определяя ее как хандер. Так что это будет вызываться при рендеринге.

Измените его на ниже (аналогично тому, что вы сделали в Сравнивать цены ссылка), и вам не нужно event.preventDefault();.

<p><Link to={`/${item.product_id}`} component={ProductDetail} onClick={(event)=>this.handleClickProductDetail(item.product_id)}> Product Details </Link></p>

---

Таким образом, вы определили onClick как

onClick={this.handleClickProductDetail(item.product_id)}

, но это должно быть,

onClick={(event)=>this.handleClickProductDetail(item.product_id)}