ReactNativeJS:警告:setState(...):在现有状态转换期间无法更新(例如在`render`中)

时间:2016-10-13 09:30:41

标签: javascript reactjs react-native react-redux react-native-android

我正在研究React-Native \ Redux App

  1. 我在渲染时预先填充了一个。这很好。 2.填充之后,我想调用一个调度操作,以便每个值的值用于执行一些计算,然后存储:我知道在渲染过程中不可能更新状态,但是在那里我可以做到这一点?
  2. 我需要它来生成输入字段时更新状态。

    任何帮助都将受到高度赞赏。

    由于

    handleInputChange: function(product, productId, input){
    let { currentSale, updateProductQuantity } = this.props;
    let updatedCurrentSale = TransactionsService.updateProductQuantity(currentSale, product, productId, input);
    let transaction = TransactionsService.packageTransaction(updatedCurrentSale);
    
    updateProductQuantity(updatedCurrentSale, transaction)
     },
    

    updateProductQuantity 调用disaptch操作,以及我们遇到问题的地方

    handleQuantityValue: function(product, productId){
     let { orderSelected } = this.props;
    
      if(orderSelected){
         var index = orderSelected.products.findIndex(x => x.product_id==productId)
      }
    
      var i = index
    
      if( i >= 0){
          var qtty = orderSelected.products[i].product_quantity
          this.handleInputChange(product, productId, qtty).bind(this)
          return qtty.toString()
      }
      else{
            return ''
      }
    },
    

    返回数值

    renderProducts: function(){
      let { currentUser, currentSale, orderSelected } = this.props;
      return _.map(currentSale.productSales, function(product, productId){
      var qtty = this.handleQuantityValue(product, productId)
      return <View style={Styles.questionPanel}>
        <Question 
          product={product}
          productId= {productId}
          Order={ orderSelected }
          quantity= { qtty }
          onInputChange={this.handleInputChange}
        />
      </View>
    }.bind(this));
    

    },

    这会渲染产品,TextInput会填充数量值。另一个是它呈现的时候,我应该(不一定)发出一个动作

    render: function(){
     let { currentSale } = this.props;
     return (
      <View style={{flex: 1}}>
        <NavBar navigator={this.props.navigator} />
        <ScrollView>
          <Text style={[Styles.dayDisplayHeader, Styles.spacing]}>
            Enter Your Sale:
          </Text>
          {this.renderProducts()}
          <Calculator 
            productSales={currentSale.productSales}
            totalSales={currentSale.totalSales}
          />
          <Button text={'Save'} whenTapped={this.handleSubmit} />
        </ScrollView>
      </View>
    )
    

2 个答案:

答案 0 :(得分:0)

您可以尝试在componentDidUpdate方法中设置状态(您可以这样做):您只需要小心并检测您必须在哪种情况下调用setState以避免无限递归。

setState inside componentDidUpdate

答案 1 :(得分:0)

你有一个递归。计算数量值会触发handleInputChange,这会在重新渲染组件时触发数量计算。

我不认为您在计算数量值时甚至需要手动触发handleInputChange。你不应该。

流程应该是这样的:

  1. 通过道具传递数据。
  2. 渲染时从道具计算数量。
  3. 仅当用户更改了值时才
  4. handleInputChange
  5. 一旦redux商店更新(我假设它通过updateProductQuantity发生),新值将通过道具再次传递给组件(返回步骤1)。