在传递道具之前反应变异状态答案

【问题标题】：React mutate state before passing props在传递道具之前反应变异状态
【发布时间】：2018-05-21 21:32:08
【问题描述】：

在将道具从状态传递到其子组件之前，有什么方法可以先更改状态？这是一个例子：

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} />
    );
}

在我的例子中，我想在收到nextProps 时立即更改关键字状态，然后再将道具传递给ChildComponent。我该怎么做？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你可以在getDerivedStateFromProps里面的return语句之前修改它。

或者你可以在渲染中进行操作，在传递给 ChildComponent 之前，它不会改变状态。

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

}

【讨论】：

【解决方案2】：

我假设您使用的是最新版本的 React (v16.3.2)。

React Blog 建议您应该在构造函数中初始化状态。根据React Doc，getDerivedStateFromProps在组件初始化后被调用，并在收到新的props时再次调用。

【讨论】：