按钮中的 onPress 给出状态转换错误

Question

尝试运行删除函数时出现错误：

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

这是代码：

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,
    },


})

为什么会出现此错误以及如何在不使用列表视图的情况下更正它。

您能否详细说明在上述情况下发生了什么，以及为什么会无限调用 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 方法。 React 禁止在渲染期间调用 setState。

按钮中的 onPress 给出状态转换错误

onPress in button gives state transition error

reactjs

react-native

react-native-android