たonPressは、状態遷移エラー

Question

を与える

class registrationHome extends Component { 

    constructor(props){ 
     super(props); 

     this.state = { 
      name: '', 
      city: '', 
      area: '', 
      lat: '', 
      lng: '', 
      productName: '', 
      products: [] 
     } 

     this.getCoordinates = this.getCoordinates.bind(this); 
     this.addProduct = this.addProduct.bind(this); 
    } 


    getCoordinates(){ 

    } 

    addProduct(){ 
     var productsArray = this.state.products.slice(); 
     productsArray.push(this.state.productName); 

     console.log(productsArray); 
     this.setState({ 
      productName: '', 
      products: productsArray 
     }); 
     // console.log(this.state.products); 
    } 
    // remove function running recursively till stacksize exceeded 
    removeProduct(index){ 
     var productsArray = this.state.products.splice(index,1); 

     console.log(productsArray); 
     this.setState({   
      products: productsArray 
     }); 
    } 

    test() { 
     console.log('hey'); 
    } 

    render() { 
     // console.log(this.state.name); 

     var products = this.state.products.map((product,i) => (
          <View key={i}> 
           <Text >{product}</Text> 
           <Button 
            title="remove" 
            onPress={this.removeProduct(i)} 
           /> 
          </View> 
         )); 
     return(
      <View>    
       <TextInput 
        placeholder="Business Name" 
        onChangeText={ name => this.setState({ name })}     
       />    
       <TextInput 
        placeholder="City Name" 
        onChangeText={ city => this.setState({ city })}     
       /> 
       <TextInput 
        placeholder="Area Name" 
        onChangeText={ area => this.setState({ area })}     
       /> 
       <View> 
        <Text>Enter products to save</Text> 
        <TextInput 
         placeholder="Enter product name" 
         onChangeText={ productName => this.setState({productName})} 
         defaultValue={this.state.productName} 
        /> 
        <Button 
         title="Add Product" 
         onPress={this.addProduct} 
        /> 
        <ScrollView style={{height: 70, marginVertical: 5}}> 
         <Text>Products Entered</Text> 
         {products} 
        </ScrollView>    
       </View> 

       <View> 
        <Button 
         title="Get Coordinates" 
         onPress={this.getCoordinates}     
        /> 
        <View style={styles.coordContainer}> 
         <Text>Lat: {this.state.lat}</Text> 
         <Text>Lng: {this.state.lng}</Text>      
        </View> 
       </View> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    coordContainer: { 
     flexDirection: 'row', 
     justifyContent: 'space-between', 
     borderWidth: 3, 
    }, 


}) 

なぜこのエラーがここに来ているし、それを修正する方法リストビューを使わずに

上記のケースで何が起きているのか、errorstackがオーバーフローするまでremoveProduct（）が無限に呼び出される理由を詳しく説明できますか。

Answer 1

ごonPressに、あなたが他のケースでそれをやっているだけのように、この

<Button 
    title="remove" 
    onPress={()=>this.removeProduct(i)} 
/> 

のような機能を渡す必要があります。

あなたが渡したいのはコールバック関数です。関数名をこのような角括弧（myFunc()）のように使用すると、すぐにその関数を呼び出すことができます。 onPress={this.removeProduct(i)}は基本的にthis.removeProduct(i)を評価し、コールバックとして結果を使用する」と言う理由です。これはあなたのremoveProduct(i)関数が中onPressアクションが実行されたときではない。どのようなあなたの代わりにしたいことは、この()=>this.removeProduct(i)ような関数宣言があり、レンダリング走る意味。

エラーあなたはrender中にremoveProduct関数内setStateメソッドを呼び出すことに起因している。私は機能をして合格しておりませんworks.whatコールバックという反応する。