如何工作 setState function？

Question

I want to create a basic crud app. So i want to create a basic live search. For this reason, i have written a simple code. Like this

searchProduct = (e) => {
 const query = e.target.value.toLowerCase();
 const data = [...this.state.exampleProducts];
 const filteredData = data.filter(p => {
 return p.name.toLowerCase().includes(query);
})
 console.log(filteredData);
}

When I use the setState function, the console.log output gives different results.

Answer 1

guessing you are new in Reactjs, please check this one first https://css-tricks.com/understanding-react-setstate/

Do not depend on this.state immediately after calling setState() and make use of the updater function instead.

setState has a callback function that you can use, but DO NOT use setState inside of it.

When I need to log something inside the state, prefer to use console.log in the render function in this way you won't miss anything.

Answer 2

The setState dose doesn't apply the change immediately. You can pass callback function like this:

 this.setState({value: 'updated-value'}, () => { console.log(this.state.value); // updated-value // You can use your updated state here })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>