Как родительский компонент повторно отображает избыточное состояние, которое обновляется его дочерним модальным? - PullRequest
Новая
       9

Как родительский компонент повторно отображает избыточное состояние, которое обновляется его дочерним модальным?

0 голосов
/ 10 апреля 2019

Я использую модальный дочерний компонент из моего родительского компонента. OnSubmit модального, он обновляет состояние избыточности, которое отображалось в моем родительском компоненте. (за модальной).

Мой дочерний компонент (модальный) успешно обновляет избыточное хранилище. Когда я закрываю модальное окно, родительский объект имеет старый отображаемый контент.

Я хочу обновить отображаемое содержимое моего родительского компонента с помощью обновленного состояния избыточности при закрытии модального режима. Как это сделать вышеупомянутый сценарий в реаги-редуксе?

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Можете ли вы положить свой код в коды andbox?

Из вашего описания кажется, что ваш родительский компонент впервые отрисовал с начальным правильным значением, но не смог повторно отрендерить новое значение после состояния в обновлениях хранилища избыточности.

Это часто случается, когда значение, которое вы хотите обновить, не имеет прямой ссылки на хранилище приставок.

Если вы не понимаете, что я только что сказал, вот пример:

В родительском компоненте у вас может быть следующий код: 

        class Parent extends Component{
             state={name:this.props.name}
             render(){
               <input value={this.state.name} onChange= 
                  {this.onChange.bind(this)} />
                 }
           }

В этом примере вы инициализируете свое состояние для первого рендера, но после первого рендеринга родительский компонент не имеет отношения к избыточному хранилищу, он становится неуправляемым компонентом.

Эртан сказал, используя componentWillReceiveProps. Многие люди делают это. Они инициализируют локальное состояние с внешнего реквизита, а затем используют componentWillReceiveProps для обновления локального состояния.

Но это не рекомендуется, и этот метод жизненного цикла теперь не рекомендуется, поскольку он может привести к потенциальным ошибкам. см. здесь для получения дополнительной информации: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Таким образом, решение вашей проблемы на самом деле очень просто:

Не инициализировать значение в локальном состоянии. Дайте значению прямую ссылку на магазин редуксов. Например: 

    class Parent extends Component {
        state={
           name:null //do not give it a value from external props
           }
       render(){
         <input value={this.props.name} onChange={this.props.onChange} />
         }
     }

Надеюсь, это поможет. Спасибо.

0 голосов
/ 10 апреля 2019

Если по какой-то причине вы сохраняете избыточные данные в состоянии, просто используйте метод componentWillRecieveProps(newProps), а затем обновите состояние. В противном случае вы все равно можете использовать componentWillRecieveProps, чтобы проверить, успешно ли обновляется магазин.

...