道具更改时如何更新状态

Question

我有一个父组件，它呈现一个大表单。 父组件具有呈现输入的子组件 Child1 - Child4。

当 Parent.props 发生变化时，Child1 - Child4 的值应该从 props 中删除为默认值。 用户必须能够通过父方法更改 ChildN 值。

我需要像 componentWillReceiveProps 这样的东西， 仅在更改时根据 Parent.props 计算新的 Parent.state。

我不能使用 getDerivedStateFromProps，因为我需要访问旧道具和新道具。 getDerivedStateFromProps 只允许访问新的道具。 我不想使用 componentWillReceiveProps。

class Parent extends Component {
state = {
    value: Object.assign({}, this.props.value)
};
handleInputChange(event) {
    this.setState({
        value: event.currentTarget.value
    });
}
render() {
    return (
        <Child
            onChange={this.handleInputChange.bind(this)}
            value={this.state.value}/>

    )
}}class Child extends Component {
render() {
    return (
        <input type="text"
           name="input"
           value={this.props.value}
           onChange={this.props.onChange.bind(this)}
        />

    )
}}

Answer 1

有两种选择：

shouldComponentUpdate(nextProps, nextState) {
if (this.props.value.id !== nextProps.value.id) {
    this.setState({
        value: Object.assign({}, nextProps.value)
    });
}
return true;}

减号：如果 props 发生变化，组件会重新渲染两次。 另一种选择：

shouldComponentUpdate(nextProps, nextState) {
if (this.props.value.id !== nextProps.value.id) {
    this.state.value: Object.assign({}, nextProps.value)
}
return true;}

减号：直接突变，但已经调用了 render()。 我不喜欢这两个选项（并且使用 componentDidUpdate），它们看起来不像是最佳实践。