Javascript 使用GetDerivedStateFromProps初始化后将道具转换为状态？

我有以下超级简单的组件：

export default class Editor extends Component {
  constructor(props) {
    super(props);

    this.state = { field: "Some Initial Text" };

    this.handleChangeField = this.handleChangeField.bind(this);
  }

  handleChangeField(e) {
    this.setState({field: e.target.value});
  }

  render() {
    return (
        <div>
          <input type="text" name="word" value={this.state.field} onChange={this.handleChangeField} />
          {this.state.field}
        </div>
    );
  }
}

导出默认类编辑器扩展组件{
建造师（道具）{
超级（道具）；
this.state={field:“一些初始文本”}；
this.handleChangeField=this.handleChangeField.bind（this）；
}
handleChangeField（东）{
this.setState（{field:e.target.value}）；
}
render（）{
返回(
{this.state.field}
);
}
}

它只有一个字段。用户可以编辑该字段。根据用户在同级组件中单击的内容，上述组件将收到一个名为

fieldValue

的道具，该道具将显示在输入字段中。由于用户应该能够编辑这个输入字段，我不能简单地将道具直接放入输入字段，而是使用状态。因此，我从道具初始化组件状态

但是，即使在初始化组件后，此道具也可能会更改。也就是说，它不仅是一个初始值，而且在运行时可能会发生变化，这取决于用户在同级组件中单击的内容

---

在React 16.3中，当

ComponentWillReceiveProps

被弃用时，我将如何解决类似的问题？我试过研究

GetDerivedStateFromProps

，但我不完全理解如何使用它。

它非常简单，下面是一个应该可以工作的原型：

export default class Editor extends Component {
  static getDerivedStateFromProps(props, state) {
    // You need to return object that will be used to fill the state, not manipulate the state itself
    return {
      field: state.field
    }
  }

  constructor(props) {
    super(props);

    this.handleChangeField = this.handleChangeField.bind(this);
  }

  handleChangeField(e) {
    this.setState({field: e.target.value});
  }

  render() {
    return (
        <div>
          <input type="text" name="word" value={this.state.field} onChange={this.handleChangeField} />
          {this.state.field}
        </div>
    );
  }
}

导出默认类编辑器扩展组件{
静态getDerivedStateFromProps（props，状态）{
//您需要返回用于填充状态的对象，而不是操作状态本身
返回{
字段：state.field
}
}
建造师（道具）{
超级（道具）；
this.handleChangeField=this.handleChangeField.bind（this）；
}
handleChangeField（东）{
this.setState（{field:e.target.value}）；
}
render（）{
返回(
{this.state.field}
);
}
}

我不会尝试同步，因为当组件扩展时，逻辑可能会变得疯狂

话虽如此，如果你真的想跟踪道具的变化并相应地更新状态，你可以使用，但要确保在更新状态之前得到一些有效的条件

下面是一个运行示例：

类编辑器扩展React.Component{
state={field:this.props.defaultValue}；
componentDidUpdate（prevProps）{
const{defaultValue}=this.props；
如果（prevProps.defaultValue！==defaultValue）{
this.setState（{field:defaultValue}）；
}
}
handleChangeField=（e）=>{
this.setState（{field:e.target.value}）；
}
render（）{
返回(
{this.props.defaultValue}
);
}
}
类应用程序扩展了React.Component{
状态={value:'默认值'}
handleChange=（{target}）=>this.setState（{value:target.value}）
render（）{
const{value}=this.state；
返回(
应用程序

编辑
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

这可能会有帮助：为什么不在构造函数中设置状态？@Keith，因为不会在每次道具更改时调用构造函数。在组件的生命周期内，道具可能会发生变化。我建议阅读以下内容：