在传递道具之前反应突变状态

Question

Is there any way to change state first before passing props from state to its children component in react? Here is an example:

static getDerivedStateFromProps(nextProps, prevState) {
    let parsedKeyword = queryString.parse(nextProps.location.search).q;

    if (parsedKeyword !== prevState.keyword) {

        return {
            keyword: parsedKeyword,
        }

    }

    return {
        keyword: prevState.keyword,
    };
}

render() {
    return ( 
       <ChildComponent myProps={this.state.keyword} />
    );
}

In my case, I want react to change the keyword state immediately when receiving nextProps before passing props to ChildComponent . How can i do it in react?

Answer 1

You can modify it before return statement inside getDerivedStateFromProps .

Alternatively you can manipulate in render, before passing to ChildComponent, it doesn't change the state though.

render() {
  const modifiedKeyword = this.state.keyword + 'Modified'
  return (
    <ChildComponent myProps={modifiedKeyword}/>
  );

}

Answer 2

I'm assuming you are using the latest version of React (v16.3.2).

The React Blog suggests you should initialize state in your constructor. According to the React Doc , getDerivedStateFromProps is called after component initialization, and again when new props are received.