我有一个React表单和正确管理状态的问题。我有一个表单(模态)的时间输入字段。初始值被设置为getInitialState中的状态变量,并从父组件传入。这本身就很好。

当我想通过父组件更新默认的start_time值时,问题就来了。更新本身在父组件中通过setState start_time: new_time进行。然而,在我的表单中,默认的start_time值从未改变,因为它只在getInitialState中定义了一次。

我尝试使用componentWillUpdate强制通过setState start_time: next_props改变状态。start_time,这实际上是工作的,但它给了我Uncaught 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

当前回答

我认为使用参考对我来说是安全的,不需要关心上面的一些方法。

class Company extends XComponent {
    constructor(props) {
        super(props);
        this.data = {};
    }
    fetchData(data) {
        this.resetState(data);
    }
    render() {
        return (
            <Input ref={c => this.data['name'] = c} type="text" className="form-control" />
        );
    }
}
class XComponent extends Component {
    resetState(obj) {
        for (var property in obj) {
            if (obj.hasOwnProperty(property) && typeof this.data[property] !== 'undefined') {
                if ( obj[property] !== this.data[property].state.value )
                    this.data[property].setState({value: obj[property]});
                else continue;
            }
            continue;
        }
    }
}

其他回答

// store the startTime prop in local state
const [startTime, setStartTime] = useState(props.startTime)
// 
useEffect(() => {
  if (props.startTime !== startTime) {
    setStartTime(props.startTime);
  }
}, [props.startTime]);

这个方法可以迁移到类组件吗?

表单的数据源必须基于用户输入,在用户已经输入的情况下,任何导致子组件更新的情况,都会触发componentWillReceiveProps或getDerivedStateFromProps操作,此时比较后的值肯定是不相等的,执行setState后,用户输入的值就会改变,这不是一个错误吗?

我认为使用参考对我来说是安全的,不需要关心上面的一些方法。

class Company extends XComponent {
    constructor(props) {
        super(props);
        this.data = {};
    }
    fetchData(data) {
        this.resetState(data);
    }
    render() {
        return (
            <Input ref={c => this.data['name'] = c} type="text" className="form-control" />
        );
    }
}
class XComponent extends Component {
    resetState(obj) {
        for (var property in obj) {
            if (obj.hasOwnProperty(property) && typeof this.data[property] !== 'undefined') {
                if ( obj[property] !== this.data[property].state.value )
                    this.data[property].setState({value: obj[property]});
                else continue;
            }
            continue;
        }
    }
}

他们的医生说得很清楚:

If you used componentWillReceiveProps for re-computing some data only when a prop changes, use a memoization helper instead.

使用:https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html what-about-memoization

componentWillReceiveProps在react 16中被描述:使用getDerivedStateFromProps代替

如果我理解正确的话,你有一个父组件,它将start_time传递给ModalBody组件,该组件将它分配给自己的状态?并且您希望从父组件而不是子组件更新该时间。

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

在getInitialState中使用道具生成状态通常会导致“真实源”的复制,即真实数据所在的位置。这是因为getInitialState只在组件第一次创建时被调用。 在任何可能的情况下,实时计算值,以确保它们不会在以后失去同步并引起维护问题。

基本上,无论何时你将父元素的道具赋值给子元素的状态,渲染方法并不总是在道具更新时被调用。您必须使用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 });
  }
}