React Form中更新道具状态的变化

我在使用React表单时遇到问题,并正确pipe理状态。 我有一个窗体中的时间input字段(模态)。 初始值在getInitialState设置为状态variables,并从父组件传入。 这本身工作正常。

当我想通过父组件更新默认的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 

如果我理解正确,你有一个父组件将start_time传递给ModalBody组件,该组件将它赋值给它自己的状态? 而你想从父母那里更新那个时间,而不是一个孩子的组成部分。

React在处理这种情况时有一些提示。

使用道具在getInitialState生成状态通常会导致“真实源”(即真实数据所在的位置)的重复。 这是因为getInitialState仅在组件第一次创build时才被调用。

只要有可能,在运行中计算值以确保它们不会稍后不同步并导致维护故障。

基本上,只要你把父母的props分配给孩子的state ,渲染方法并不总是在道具更新上被调用。 您必须使用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 }); } }