Question

我正在使用异步功能从API检索折扣，然后在购物车中使用该折扣，每当在render方法中调用打折的购物车功能时，它就会开始自我重复，但是只要通过click事件上的按钮执行调用，它就会完美运行。

discountedCart = async (id, qty) => {
    console.log("Discounted Cart");
    const response = await fetch(
    
      "https://usautoparts-erp.azurewebsites.net/Api/Cart",
      {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ products: [id] }),
      }
    );

    const data = await response.json();
    console.log(data);

    this.setState({
      DiscountData: data,
    });
    let D = "No discount";
    const discounts = data.filter((item) => item.quantity <= qty);
    console.log("selected");
    console.log(discounts);
    if (discounts[discounts.length - 1].amount != null) {
      D = discounts[discounts.length - 1].amount;
      console.log("Amount:" + D);
    } else if (discounts[0].percentage != null) {
      D = discounts[0].percentage;
      console.log("percentage:" + D);
    }
    console.log("Discount:" + D);
    this.setState({
      rough: D,
    });

    return D;
   
  };

render() {
   

    return (
   <>
        <Button title="Clear Cart" onPress={() => this.ClearCart()} />
       
        
        <FlatList
        
          data={this.state.p}renderItem={({ item }) => 

          {const a = this.discountedCart(item.id,item.Qty);
            return(
            <View style={{ flex: 1, flexDirection: "column", margin: 1 }}>
              <Text>{item.id}</Text>
             
              </View>
            </View>
          )}
          }
          numColumns={1}
          
          keyExtractor={item => item.id.toString()}
       
          
       
        />
     </>
    );
  }
}

Answer 1

在这一行：

{const a = this.discountedCart(item.id,item.Qty);

您触发DiscountedCart函数，该函数设置导致重新渲染的状态。重新渲染组件时，它将调用相同的函数，并设置状态=>重新渲染。

确保您未在渲染方法中调用函数，该方法会更改组件状态（或基本上使用setstate）。

您可能想获取数据并在componentDidMount上计算打折的购物车，然后设置状态，在渲染方法中使用该状态属性

我的异步功能可以无限次重复

1 个答案: