以React形式更新道具更改的状态

Question

我有问题的反应形式和管理的状态适当。我在一个表单中有一个时间输入字段（在一个模态中）。初始值在GetInitialState中设置为状态变量，并从父组件传入。这本身就很好用。

当我想通过父组件更新默认的start_time值时，问题就来了。更新本身通过setstate start_time:new_time在父组件中发生。但是，在我的表单中，默认的start_time值从不更改，因为它只在getinitialstate中定义过一次。

我尝试使用componentwillupdate通过setstate start_time:next_props.start_time强制更改状态，这确实起到了作用，但给了我未捕获的RangeError：最大调用堆栈大小超出错误。

所以我的问题是，在这种情况下更新状态的正确方式是什么？我是不是想错了？

当前代码：

@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

Answer 1

显然事情正在发生变化....getDerivedStateFromProps（）现在是首选函数。

null

class Component extends React.Component {
  static getDerivedStateFromProps(props, current_state) {
    if (current_state.value !== props.value) {
      return {
        value: props.value,
        computed_prop: heavy_computation(props.value)
      }
    }
    return null
  }
}

Answer 2

componentWillReceiveProps自react 16以来被启用：改用getDerivedStateFromProps

如果我没有理解错的话，您有一个父组件正在将start_time向下传递给modalbody组件，该组件将它分配给自己的状态？并且您希望从父组件而不是子组件更新该时间。

React提供了一些处理这种情况的技巧。（注意，这是一篇已经从Web上删除的旧文章。这里有一个关于组件道具的当前文档的链接）。

在getinitialstate中使用props生成状态经常会导致“真相来源”的重复，即真实数据在哪里。这是因为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 });
  }
}