Значение не меняется в React-Native-Numeric-Input

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

Я обновляю количество onChange of react-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.info("qtyNum handler");
    console.info(value)
    console.info(id)
    try{
        let user_id = await AsyncStorage.getItem(ID);
        console.info(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.info(updateProductRes);
        this.fetchCartProduct();
    }catch(errors){
        console.info(errors);
    }
}

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

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
672
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info("qtyNum handler");
    console.info(value)
    console.info(id)
    try{
        let user_id = await AsyncStorage.getItem(ID);
        console.info(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.info(updateProductRes);
        this.fetchCartProduct();
    }catch(errors){
        console.info(errors);
    }
}

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

у меня возникает аналогичная проблема, но в моем случае, когда я использую значение с опорой, извлекающей данные из firebase, значение не увеличивается и не уменьшается при нажатии кнопок + и -. Когда значение свойства не используется с извлеченными данными, оно работает нормально. Но для моей цели значение числового ввода необходимо изменить с помощью извлеченных данных.

jeet 04.10.2020 10:06

Другие вопросы по теме