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

Question

我正在开发一个 React-Native\Redux 应用程序

1. 我正在预填充它们渲染的。这很好用。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));

}，

这将呈现产品，并且文本输入填充数量值。另一个是，当它呈现时，我应该(不一定(调度一个动作

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>
)

Answer 1

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

setState in componentDidUpdate

Answer 2

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

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

流程应如下所示：

1. 通过道具传递数据。
2. 渲染时计算道具的数量。
3. 仅当用户更改值时handleInputChange。
4. 一旦 redux 存储被更新(我假设它通过 updateProductQuantity 发生(，新值将通过 props 再次传递给组件(返回步骤 1(。