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 }); } }
