在React表单中道具更新状态更新

小编典典

在React表单中道具更新状态更新

reactjs

我在使用React表单和正确管理状态时遇到麻烦。我有一个形式为模式的时间输入字段。初始值在中设置为状态变量getInitialState，并从父组件传递。这本身工作正常。

当我想通过父组件更新默认的start_time值时，就会出现问题。更新本身通过发生在父组件中setState start_time: new_time。但是在我的表单中，默认的start_time值从不更改，因为它仅在中定义一次getInitialState。

我尝试过通过componentWillUpdate强制进行状态更改setState start_time: next_props.start_time，该更改确实有效，但给了我Uncaught RangeError: Maximum call stack size exceeded错误。

所以我的问题是，在这种情况下更新状态的正确方法是什么？我是否以某种方式在考虑这个错误？

当前代码：

@ModalBody = React.createClass
  getInitialState: ->
    start_time: @props.start_time.format("HH:mm")

  #works but takes long and causes:
  #"Uncaught RangeError: Maximum call stack size exceeded"
  componentWillUpdate: (next_props, next_state) ->
    @setState(start_time: next_props.start_time.format("HH:mm"))

  fieldChanged: (fieldName, event) ->
    stateUpdate = {}
    stateUpdate[fieldName] = event.target.value
    @setState(stateUpdate)

  render: ->
    React.DOM.div
      className: "modal-body"
      React.DOM.form null,
        React.createElement FormLabelInputField,
          type: "time"
          id: "start_time"
          label_name: "Start Time"
          value: @state.start_time
          onChange: @fieldChanged.bind(null, "start_time”)

@FormLabelInputField = React.createClass
  render: ->
    React.DOM.div
      className: "form-group"
      React.DOM.label
        htmlFor: @props.id
        @props.label_name + ": "
      React.DOM.input
        className: "form-control"
        type: @props.type
        id: @props.id
        value: @props.value
        onChange: @props.onChange

阅读 312

2020-07-22

共1个答案

小编典典

componentWillReceiveProps被depcricated因为反应16：使用getDerivedStateFromProps代替

如果我理解正确，您有一个父组件正在传递start_time给将该ModalBody组件分配给其自身状态的组件？您想从父组件而不是子组件更新该时间。

React有一些处理这种情况的技巧。（请注意，这是一篇从网上删除的旧文章。这是指向有关props的当前文档的链接）。

使用道具生成状态getInitialState通常会导致“真相来源”重复，即真实数据所在的位置。这是因为getInitialState仅在首次创建组件时才调用。

只要有可能，就可以即时计算值，以确保以后不会出现不同步并造成维护麻烦。

基本上，无论何时将父对象分配给props子state对象，都不总是在prop更新时调用render方法。您必须使用componentWillReceiveProps方法手动调用它。

componentWillReceiveProps(nextProps) {
  // You don't have to do this check first, but it can help prevent an unneeded render
  if (nextProps.startTime !== this.state.startTime) {
    this.setState({ startTime: nextProps.startTime });
  }
}

2020-07-22