道具更新状态在React Form中发生变化

我有一个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

当前回答

还有componentDidUpdate可用。

函数signatur:

componentDidUpdate(prevProps, prevState, snapshot)

将此作为更新组件时对DOM进行操作的机会。在初始渲染时不会被调用。

参见您可能不需要派生状态文章，该文章描述了componentDidUpdate和getDerivedStateFromProps的反模式。我发现它很有用。

2018-07-08 07:47:01

其他回答

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

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

2020-09-19 02:17:26

他们的医生说得很清楚:

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

2018-11-10 18:05:51

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

2021-07-17 03:48:19

显然，事情正在发生变化....getDerivedStateFromProps()现在是首选函数。

class Component扩展了React。组件{ 静态getDerivedStateFromProps(props, current_state) { 如果(current_state。值!== props.value) { 返回{ 价值:props.value, computed_prop: heavy_computation (props.value) ｝｝返回null ｝｝

(以上代码由danburzo @ github)

2018-04-17 01:02:35

我使用功能组件和useEffect钩子提出了以下解决方案: 它通过使用useEffect钩子监视props中的控制属性来工作

const { useEffect, useState } = React const Child = (props) => { const [bgColor, setBgColor] = useState(props.bgColor); const { children } = props; useEffect(() => { setBgColor(props.bgColor); }, [props.bgColor]); return ( <div style={{ height: "100px", width: "100px", backgroundColor: bgColor }}>{children}</div> ) } const Parent = (props) => { const [childControllingProp, setChildControllingProp] = useState(props.childControllingProp); const { title } = props; const inputRef = React.createRef(); return ( <> <input ref={inputRef} type="text" onChange={() => setChildControllingProp(inputRef.current.value)}/> <Child bgColor={childControllingProp}>{title}</Child> </> ) } $(document).ready(() => { ReactDOM.render( <Parent title="Title" childControllingProp="blue"/>, document.querySelector("#root") ); }) <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <div id="root"></div>

2022-03-09 01:50:38

道具更新状态在React Form中发生变化

推荐文章

最新文章

标签