React中如何先修改State再向子组件传递Props？

嘿，我来帮你搞定这个问题！首先明确说：你想要在父组件接收到新的props后，先更新自身的keyword状态，再把这个更新后的状态作为props传给子组件，这个需求完全可以实现，而且你的现有代码思路是对的，只是有几个小细节可以优化得更规范。

先看你的代码逻辑：你用了getDerivedStateFromProps这个生命周期函数，它的作用就是根据新的props来更新state，而且它会在render方法执行前被调用。这意味着，当你在这个函数里返回新的state后，React会立即用这个新state来执行后续的render，所以子组件ChildComponent拿到的myProps肯定是更新后的keyword值，完全符合你“先改state再传props”的要求。

不过你的代码里有个可以优化的地方：当解析到的关键词和当前state的keyword相等时，你返回了{ keyword: prevState.keyword }，其实这时候直接返回null就可以了——返回null表示不需要更新state，这样能避免不必要的state更新操作，让代码更高效。

优化后的代码如下：

static getDerivedStateFromProps(nextProps, prevState) {
  const parsedKeyword = queryString.parse(nextProps.location.search).q;
  // 只有当解析到的关键词和当前state不同时，才更新state
  if (parsedKeyword !== prevState.keyword) {
    return { keyword: parsedKeyword };
  }
  // 不需要更新时返回null，避免无意义的state更新
  return null;
}

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

另外还要给你提个小建议：如果这个keyword只需要用来传给子组件，父组件自身不需要用它做其他逻辑，那其实可以不用把它存到state里，直接在render里解析后传给子组件就行，这样代码会更简洁：

render() {
  const parsedKeyword = queryString.parse(this.props.location.search).q;
  return <ChildComponent myProps={parsedKeyword} />;
}

当然，如果这个keyword还需要在父组件的其他方法里使用，或者需要和其他state变量联动，那把它存到state里就是合理的选择。

内容的提问来源于stack exchange，提问作者ishadif