他们的医生说得很清楚:

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或getDerivedStateFromProps操作，此时比较后的值肯定是不相等的，执行setState后，用户输入的值就会改变，这不是一个错误吗?

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

我使用功能组件和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>

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

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

钩子的新方法是使用useEffect而不是旧的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 });
  }
}

在一个功能性的钩子驱动组件中变成如下:

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

我们使用setState设置状态，使用useEffect检查对指定道具的更改，并在道具更改时执行更新状态的操作。