How to get state in react

How to get state in react: First open the corresponding react code file; then in react you can directly obtain the state through "this.state.{property}".

The operating environment of this tutorial: windows7 system, react17.0.1 version, Dell G3 computer.

How to get state in react?

In react, state can be obtained directly through this.state.{property}, but when we modify state, there are often many pitfalls that need to be paid attention to.

The following are three common traps:

1. The state cannot be modified directly.

The component modifies state and render will not be retriggered. For example:

//错误
this.state.title='React';
正确修改方式是使用setState（）；
//正确
this.setState({title:'React'});

2. The state is updated asynchronously

When setState is called, the component state does not change immediately. It just puts the state to be modified into the event queue, and react The real execution timing will be optimized, and for its own performance reasons, multiple setState state modifications may be merged into one state modification. Therefore, do not rely on the current state to calculate the next state, because when the state modification is actually performed, the dependent this.state is not guaranteed to be the latest state, because react itself will merge multiple states into one, and this.state will still be The state before several state modifications cannot also rely on the current props to calculate the next state, because the update of props is also asynchronous. For e-commerce applications, in the shopping cart, if you click the purchase button once, the purchase quantity will be increased by 1. If you click it twice in a row, it will be increased by 2. When react is merged and modified to once, it is equivalent to executing The following code:

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

So the previous operation is overwritten, and the final purchase quantity is only increased by 1. At this time, you can use another function as a parameter setState. This function has two parameters, the first parameter is the current The previous state preState (the state before this component state is modified) of the latest state (the state after this component state is updated), and the second parameter is the latest props. The list is as follows:

//正确
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

3. The update of state is a merging process

When calling ssetState() to modify the state of the component, only the changed state needs to be passed in, not the complete state. state, because the update of component state is a merging process. For example, the state of a component is:

this.state({
title:'React',
content:'React is an wondeful JS library'
})

When you only need to modify the title, you only need to pass the modified title to setState:

this.setState({title:'ReactJs'});

react will merge the latest title to the original state, while retaining the content of the original state. The final merged state is:

this.state({
title:'ReactJs,
content:''React is an wondeful Js library
})

Related recommendations: "react tutorial"

The above is the detailed content of How to get state in react. For more information, please follow other related articles on the PHP Chinese website!