In React, the parent component passes a dynamic value to the child component without render, how to update it in the child component?

now I have a parent component that has a this.state.title, that changes when my onClick operation carries out refetch data, but the parent component does not render,. I now have a child component that accepts this.state.title, and wants to display the title, in the input box. I can edit it, and finally click button save in the child component. However, I find that the string in the input box of the parent component refetch, child component is not updated each time.

The relevant code for the

subcomponent is as follows:
type Props = {|

productSortTitle: string,

state = {

productSortTitle: this.props.productSortTitle,

};

< TextInput

  onChange={this._handleProductSortTitleChange}
  value={this.state.productSortTitle}

/ >

_ handleProductSortTitleChange = event = > {

this.setState({productSortTitle: this._sanitizeProductSortTitle(event)});

};

I think it"s because the subcomponent doesn"t have re-render, even if props changes it, it won"t accept it.

complete react newcomer. Hope God"s advice, Baidu found that there is this game, which I have been doing before:
in React, the communication between father and son components is to pass parameters through props. In general, the parent component passes a value to the child component, along with a method function that modifies the value. In this way, the value can be modified by calling this method function in the subcomponent and passed to the subcomponent again, thus modifying the state of the subcomponent.

but feel good around, because my productSortTitle operation and save are carried out in the child component, if possible, I do not want to send back the parent component, I would like to ask if there is any other way to make the child component rerender?
knows that shouldComponentUpdate, wrote a
shouldComponentUpdate (nextProps: Props) {
return nextProps.productSortTitle! = = this.props.productSortTitle;
}
and found that it didn"t change, T T

React.js

Mar.28,2021

class Test extends React.Compont{ constructor(props){ super(props) this.state = { title: props.title } } componentWillReceiveProps(nextProps){ // title componentWillReceiveProps if(this.props.title !== nextProps.title){ this.setState({ title: nextProps.title }) } } getInput = input => this.input = input handleClick = () => { let title = this.input.value this,props.fun(title) // this.setState({ title }) } render(){ return ( <div> <input ref={this.getInput} type="text"/> <button onClick={this.handleClick}>Test</button> </div> ) } }