React-Native-Numeric-Input 中的值没有变化

Question

我正在为我的学习目的制作一个电子商务应用程序。我在购物车页面中使用 textInput 更新数量现在我正在使用 react-native-numeric-input 。

我正在更新 react-native-numeric-input 的 onChange 数量，当我正常测试它时它正在工作，但是当我添加我的代码以更新我的数据库中的数量时，它无法正常工作...... 这里我附上应用程序异常行为的视频： Visit link to watch video

这是我的数字输入组件代码：

<NumericInput
    totalHeight={35}
    totalWidth={80}
    validateOnBlur={false}
    initValue={qtyN}
    separatorWidth={0}
    rounded={true}
    textColor='#2e6153'
    borderColor='#0000'
    inputStyle={{
        backgroundColor: "#fff",
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    containerStyle={{
        backgroundColor: '#2e6153',
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    iconStyle={{
        color: '#fff',
    }}
    leftButtonBackgroundColor='#2e6153'
    rightButtonBackgroundColor='#2e6153'
    minValue={1}
    maxValue={999}
    onChange={(value) => this.qtyNumHandle(value, data.item.id)}
/>

和我在 onChange 上使用的函数：

qtyNumHandle = async (value, id) => {
    console.log("qtyNum handler");
    console.log(value)
    console.log(id)
    try{
        let user_id = await AsyncStorage.getItem(ID);
        console.log(user_id);
        let updateProduct = await fetch(`http://website.com/api/cart/updatecart?productid=${id}&userid=${user_id}&qty=${value}`, {
            "method": "POST",
            "headers": {
                "cache-control": "no-cache",
            },
        });
        let updateProductRes = await updateProduct.json();
        console.log(updateProductRes);
        this.fetchCartProduct();
    }catch(errors){
        console.log(errors);
    }
}

如果我做错了什么，请告诉我。如果我的代码是正确的，为什么会出现这个问题。

Answer 1

是的..!!我得到了解决方案。

问题是我没有使用 value 属性。

这是我的 NumericInput 新代码：

<NumericInput
    value={this.state.cartTotal[data.index].qty}
    // above the state I've used is containing the array data of my cart products
    // and I used [data.index] because this NumericInput is in FlatList.
    // so to get the quantity of perticular I used it array[data.index].qty
    totalHeight={35}
    totalWidth={80}
    validateOnBlur={false}
    initValue={this.state.cartTotal[data.index].qty}
    separatorWidth={0}
    rounded={true}
    textColor='#2e6153'
    borderColor='#0000'
    inputStyle={{
        backgroundColor: "#fff",
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    containerStyle={{
        backgroundColor: '#2e6153',
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    iconStyle={{
        color: '#fff',
    }}
    leftButtonBackgroundColor='#2e6153'
    rightButtonBackgroundColor='#2e6153'
    minValue={1}
    maxValue={999}
    onChange={(value) => this.qtyNumHandle(value, data.item.id)}
/>

这是我在 onChange 上使用的函数（没有变化）：

qtyNumHandle = async (value, id) => {
    console.log("qtyNum handler");
    console.log(value)
    console.log(id)
    try{
        let user_id = await AsyncStorage.getItem(ID);
        console.log(user_id);
        let updateProduct = await fetch(`http://website.com/api/cart/updatecart?productid=${id}&userid=${user_id}&qty=${value}`, {
            "method": "POST",
            "headers": {
                "cache-control": "no-cache",
            },
        });
        let updateProductRes = await updateProduct.json();
        console.log(updateProductRes);
        this.fetchCartProduct();
    }catch(errors){
        console.log(errors);
    }
}

希望这对其他人有帮助。