Значение не изменяется в React-Native-Numeric-Input - PullRequest
0 голосов
/ 28 мая 2019

Я делаю приложение электронной коммерции для своих учебных целей. Я использовал textInput для количества обновлений на странице корзины. И теперь я использую для этого реактивный-нативный-числовой ввод.

Я обновляю количество onChange response-native-numeric-input, оно работало, когда я тестировал его нормально, но когда я добавил свой код для обновления количества в моей базе данных, оно не работает должным образом ... здесь я прилагаю видео о ненормальном поведении приложения: Посетите ссылку, чтобы посмотреть видео

это мой код компонента ввода чисел:

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

скажите, пожалуйста, сделал ли я что-то неправильно? И если мой код правильный, то почему возникает эта проблема.

1 Ответ

0 голосов
/ 29 мая 2019

Да .. !!Я получил решение.

Проблема была в том, что я не использовал значение prop.

Вот мой новый код 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);
    }
}

Надеюсь, это поможет кому-то еще.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...