Как обновить состояние при смене реквизита - PullRequest
Новая
       10

Как обновить состояние при смене реквизита

0 голосов
/ 18 февраля 2019

У меня есть компонент Parent, который отображает большую форму.Родительский компонент имеет презентационные дочерние компоненты Child1 - Child4, которые отображают входные данные.

Когда изменяется Parent.props, значения Child1 - Child4 должны быть сброшены по умолчанию из реквизитов.У пользователя должна быть возможность изменять значение ChildN родительским методом.

Мне нужно что-то вроде componentWillReceiveProps, чтобы вычислять новый Parent.state в зависимости от Parent.props, только когда он изменяется.

IЯ не могу использовать 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)}
        />

    )
}}

1 Ответ

0 голосов
/ 20 февраля 2019

Есть два варианта: 

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), они не выглядят как лучшая практика.

...