Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to modify the state of components in react". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In react, you can use setState () to modify the state of the component. SetState () is the method used to update the component state state, which can queue changes to the component state or get the latest status with the syntax of "setState (updater, [callback function])".

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

How to modify the state of components in react

The state of the component cannot be modified directly in React. It needs to be modified through setState ().

In react, setstate is the method used to update the component state state; setState () queues changes to the component state and informs React that it needs to re-render the component and its subcomponents using the updated state, with the syntax of "setState (object, [callback function])".

Syntax:

SetState (updater [, callback])

Updater updater

Callback function executed after callback update

Modify statu

For example, you want to change the value of content in state to 'Xiang Xiang'.

State = {content: 'big bear'}

Updating the view cannot be triggered by direct modification:

This.state.content = 'Xiang Xiang'

Changes need to be made through setState:

This.setState ({content: 'fragrant'})

Get the latest status value

Because setState () is asynchronous, you may not get the latest value after modifying the state. If you want to obtain the latest state value, you can provide a callback function for setState (), which will be executed after the status update. You can get the latest status in the callback function.

Example:

This.setState ({content: 'fragrant'}, () = > {/ / callback to get the latest status console.log (this.state.content)})

The first parameter of setState () can also be a function, which takes two arguments: the first parameter is the state value before the update, and the second parameter is props (which can get the data passed by the parent component); this form can be used when the previous state value is involved when the state is modified.

This.setState ((state, props) = > {console.log (state.content, props) / / returns an object return {content: prev.content + 'fragrant'}) "how to modify the state of components in react" ends here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.