反应 - 设置加载状态只在特定的点击按钮

Question

这里是我当前的代码

class cart extends Component { 
    state = { loading: [] }; 

    addToCart = (e, id) => { 
     let loading = this.state.loading.slice(); 
     loading[e] = true; 
     this.setState({ 
      loading, 
     }) 
    }; 
    render() { 
     const { data } = this.props; 

     return (
      <div> 
      {data.map(catering => { 
       const { menus } = catering; 

       return (
        <Row> 
        {menus.map(menu => (
         <Col xs={12} md={12} lg={6} key={menu.id} className="m-bottom-15"> 
         <Card style={{ height: '165px', border: 0, overflow: 'hidden' }}> 


         <CardActions> 
         <LoadingButton 
         className="button small primary pull-right" 
         loading={thi.state.loading || false} 
         onClick={e => this.addToCart(e, menu.id)} 
         > 
         <MdAdd size={18} color={white} /> 
         <span className="font-14 font-400">Add to cart</span> 
         </LoadingButton> 

         </CardActions> 
         </Card> 
         </Col> 
         ))} 
        </Row> 

        ); 
      } 
     } 

将有大约20个按钮时map功能完成。

我想实现的是：每次用户点击add to cart按钮时，我都会调用ajax来保存购物车并显示特定点击按钮的加载。 ajax完成后，将状态恢复正常。

在我目前的代码，我还没有把我的ajax调用，但我仍然要确保加载按钮的工作按下。现在它不工作。

我该如何做到这一点？

谢谢。

Answer 1

addToCart方法存在一些错误。您应该使用id作为负载的指标，并设置装阵陈述，因为这：

addToCart = (e, id) => { 
    let loading = this.state.loading.slice(); 
    loading[id] = true; 
    this.setState({ 
     loading: loading 
    }); 
}; 

此外，在渲染的方法，改变this.state.loading到this.state.loading [menu.id]：

<LoadingButton 
    className="button small primary pull-right" 
    loading={this.state.loading[menu.id] || false} 
    onClick={e => this.addToCart(e, menu.id)} 
> 

当ajax调用完成时，您只需调用setState函数，该函数将回调方法中的数组值设置为false。

Answer 2

而是在加载array保持bool的，保持菜单IDS，无论何时添加按钮被点击，推动该项目的ID为载入array。在生成卡片时，检查加载array是否有id，如果是，则显示加载，否则显示该卡片。

写这样的：

class cart extends Component { 

    state = { loading: []}; 

    addToCart = (e, id) => { 
     let loading = this.state.loading.slice(); 
     loading.push(id); 
     this.setState({ 
      loading 
     }) 
    }; 

    render() { 
     const { data } = this.props; 

     return (
      <div> 
      {data.map((catering,i) => { 
       const { menus } = catering; 
       return (
        <Row> 
         {menus.map(menu => { 
          return this.state.loading.indexOf(menu.id) >= 0 ? 
           <Col xs={12} md={12} lg={6} key={menu.id} className="m-bottom-15"> 
            <Card style={{ height: '165px', border: 0, overflow: 'hidden' }}> 
             <CardActions> 
              <LoadingButton 
               className="button small primary pull-right" 
               loading={thi.state.loading || false} 
               onClick={e => this.addToCart(e, menu.id)} 
              > 
               <MdAdd size={18} color={white} /> 
               <span className="font-14 font-400">Add to cart</span> 
              </LoadingButton> 
             </CardActions> 
            </Card> 
           </Col> 
          : 
          /*Loading icon*/ 
         })} 
        </Row> 
       ) 
      })} 
     ) 
    } 
}