Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

React Native - Array of objects in state not updating correctly

$
0
0

I really think I'm going crazy here. So I made a shopping-type app, add to cart and etc.

I have extra comments on each Item which the user can enter any text they want to. The state is correct on "onChangeText" of the input, I checked it with the console. However, when I want to save it (after an edit of the cart), despite the console.log's making sense and that showing the correct state etc, the options changes successfully, but the comments does not. This is very weird as all the other cart array object do change, except the comment. Here is the code:

saveItemCart() {    var index = this.state.cartItems.indexOf(x => x.date === this.state.dateAdded);    let cartItemsArray = this.state.cartItems;    temp = { 'catNumber': this.state.catNumber, 'itemNumber': this.state.itemNumber, 'quantity': this.state.itemQuantity, 'options': this.state.selectedOptions, 'date': this.state.dateAdded, 'comments': this.state.commentsText};    cartItemsArray[index] = temp;    this.setState({ cartItems: cartItemsArray }, () => {        this.updateTotal();        this.setState({ selectedOptions: [], checked: [] })    })}

State:

state = {        ModalItemShown: false,        ModalCartShown: false,        ModalEditShown: false,        isShowToast: false,        isShowToastError: false,        rest_id: this.props.route.params['restaurantid'],        menuData: this.getMenu(),        catNumber: 1,        itemNumber: 1,        dateAdded: null,        commentsText: "",        cartItems: [],        checked: [],        selectedOptions: [],        total: 0,        itemQuantity: 1,    }

Input (inside the render):

<View style={styles.modalOptions}><Input placeholder="..." placeholderTextColor="gray" defaultValue={this.state.commentsText} onChangeText={text => this.setState({ commentsText: text }, () => {console.log(this.state.commentsText)})} /></View><Button shadowless style={styles.button1} color="warning" onPress={() => {      let my = this;      this.showToast(true);      setTimeout(function () { my.showToast(false) }, 1000);      this.saveItemCart();      this.hideModalEdit(false);      }}>Save</Button>

The problem is in the input of the EDIT cart modal(i.e. page). If the user puts the comment initially before adding it to his cart, then when I open the edit it has the correct comment. If I change it and click save, it does not work.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>