javascript - 在传递 props 之前 react 变异状态

Question

在 react 中将 Prop 从状态传递到其子组件之前，有什么方法可以先更改状态吗？这是一个例子:

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

就我而言，我希望在将 props 传递给 ChildComponent 之前接收到 nextProps 时立即使用react以更改关键字状态。我怎样才能在 react 中做到这一点？

Answer 1

您可以在getDerivedStateFromProps内的return语句之前修改它。

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

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

}