Question

我有一个组件Parent，它呈现了很大的形式。父组件具有表示子组件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;}

减号：如果更改道具，则组件重新渲染两次。另一种选择：

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

负号：直接突变，但render（）已被调用。我不喜欢这两个选项（以及使用componentDidUpdate），它们看起来并不是最佳实践。

道具变更时如何更新状态

1 个答案: