how to clear the react state array?

Question

How to clear the existing data in react state variable (Array) and assign another array to it. I have try below thing but it doesn't works.

    itemsChanged(items) {
        this.setState({item : []})    //item is my state variable
        this.setState({item : items})
        console.log("ITEMS : ",this.state.item)   //this  will not print the updated value
    }

Thanks in advance

setting `this.setState({ item: items })` should already override the existing array if it is a different collection of items. `setState` is asynchronous so your console may be firing before the action is actually completed — LoganRx, Aug 16 '17 at 13:23
Pl go through this :https://stackoverflow.com/questions/42593202/why-calling-setstate-method-doesnt-mutate-the-state-immediately/42593250#42593250 — Dev, Aug 16 '17 at 13:23
to check the result state you need to move the console.log in the handler like this : `this.setState({item : []}, function() {console.log("ITEMS : ",this.state.item)})` — Olivier Boissé, Aug 16 '17 at 13:27
Possible duplicate of [Why calling setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/42593202/why-calling-setstate-method-doesnt-mutate-the-state-immediately) — mpalmer, Aug 16 '17 at 17:40

score 3 · Accepted Answer · answered Aug 16 '17 at 13:23

3

You don't need to assign an empty array first. Just pass the new array to it. The only reason why it's not working is that setState is an asynchronous call. Use it like this

 this.setState({item : items}, () => console.log("ITEMS : ",this.state.item) )

answered Aug 16 '17 at 13:23

Murat Karagöz

35,401
16
78
107

@narenmnp Please accept the answer if it helped you. – Murat Karagöz Aug 16 '17 at 13:55

score 1 · Answer 2 · answered Aug 16 '17 at 13:24

1

According to React's docs

React may batch multiple setState() calls into a single update for performance.

If you want to check your state value after setState, you should do like:

this.setState({item : items}, () => console.log(this.state.item));

answered Aug 16 '17 at 13:24

An Nguyen

1,487
10
21

score 0 · Answer 3 · answered Aug 16 '17 at 13:24

0

setState is an async method. So, when you print it on console, It still can be updating. You can use console log before return render.

...

render(){
  console.log("ITEMS : ",this.state.item);
  return (<div>...</div>)
}
...

answered Aug 16 '17 at 13:24

Kamuran Sönecek

3,293
2
30
57

score 0 · Answer 4 · answered Aug 16 '17 at 13:29

0

As they describe:

setState(updater, [callback])

so that may suggest it is not a synchronous operation.

Use:

itemsChanged(items) {
  var me = this;

  me.setState({item : items}, function(){
         console.log("ITEMS : ", me.state.item);
    });
}

answered Aug 16 '17 at 13:29

bluehipy

2,254
1
13
19

score 0 · Answer 5 · answered Aug 16 '17 at 13:32

One thing you should understand about setState is that it works asynchronously. If you try to console.log the state directly after calling setState, you won't see any changes yet.

You also don't have to clear out the array by calling setState with an empty array--you can just replace the current array with the new array.

this.setState({ items: newItems });

If you want to log the change, I'd suggest trying to do it in the component's componentShouldUpdate method.

score 0 · Answer 6 · edited Aug 16 '17 at 15:55

0

setState is an async function，if you are writting the code as that:

this.setState({xxState})
console.log(this.state.xxState)

The program will execute the console.log first，so you should write as that：

this.setState（｛xxx｝，（）=> ｛
    console.log（this.state.....）
｝）

And it will be work well.

edited Aug 16 '17 at 15:55

PeterMader

6,987
1
21
31

answered Aug 16 '17 at 13:39

Nunchakus

1
1

how to clear the react state array?

6 Answers6