Solution for React not refreshing subcomponents after SetState

React is a componentized front-end JavaScript UI framework. Each component can declare and maintain the state attribute. The framework refreshes components according to the change of state. In this article, after the state of the parent component is passed to the child component, the state changes, but the child component is not updated.

problem

After the state of this component is passed to the subcomponent in the form of props, the subcomponent initializes its own state with its value. Later, when the parent component state changes, the child component will not be updated.

 //Negative teaching material. If you don't know why, don't write like this //Reminder again: if you don't know why to write the negative textbook, don't write it like this class A extends React.Component{ constructor(props){ super(props); this.state = { test:"t1"; } } render(){ return( <div> <B testVal={this.state.test} /> //Other codes, etc </div> ) } someCallBackFunc(str){ this.setState({ test:str }) } } class B extends React.Component{ constructor(props){ super(props); //Remind me again: if you don't know what you are writing, don't write negative textbooks this.state = { //In addition to special needs, copying props into state should be avoided as far as possible. testVal:this.props.testVal; } } render(){ return( <div>{this.state.testVal}</div> ) } }

When the someCallBackFunc After the method is called, test will be updated to str in the next cycle, but the rendered subcomponent B in A is not updated.

reason

before exclude In this case, objects such as arrays directly modify the original object, and then shallow copy the assignment. As a result, the memory address indicated by the pointer does not change, and React thinks the value does not change. In my case, the string will open a new memory block every time. This can be ruled out.

What's the reason? It's very simple. The official document says:

 Avoid copying props into state! The problem is that it’s both unnecessary (you can use this.props.color directly instead), and creates bugs (updates to the color prop won’t be reflected in the state). Only use this pattern if you intentionally want to ignore prop updates. In that case, it makes sense to rename the prop to be called initialColor or defaultColor. You can then force a component to “reset” its internal state by changing its key when necessary.

In fact, the reason for not updating is the testVal Is constant, and its value is Value at first initialization , which is the first props.testVal 。

In other words, in the constructor constructor perhaps getInitialState After execution, this value will remain unchanged.

According to the development specification, It is unreasonable to copy the props parameter to state, unless you want to ignore the updates of props, such as the default color and other special cases 。

resolvent

1. Direct use this.props.testVal
   Modify the Render content of B to:

    render(){ return( <div>{this.props.testVal}</div> ) }

2. Rewrite props change callback (not recommended)
   Override method in B componentWillReceiveProps ：

    componentWillReceiveProps(nextProps){ this.setState({ testVal:nextProps.testVal }); }

   This method will be called when props change, and the state can be updated at this time.