Я делаю приложение для электронной коммерции для целей обучения. Я использовал 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);
}
}
пожалуйста, скажите мне, если я сделал что-то неправильно. И если мой код правильный, то почему возникает эта проблема.
Да..!! Я получил решение.
Проблема была в том, что я не использовал свойство 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, значение не увеличивается и не уменьшается при нажатии кнопок + и -. Когда значение свойства не используется с извлеченными данными, оно работает нормально. Но для моей цели значение числового ввода необходимо изменить с помощью извлеченных данных.