Принудительно перемонтировать компонент с новыми реквизитами - PullRequest
Новая
       13

Принудительно перемонтировать компонент с новыми реквизитами

0 голосов
/ 11 ноября 2019

Я использую react-native@0.60.5 и react-native-router-flux@4.0.6. Я пытаюсь перейти от компонента selectItems к newCollection, который является формой.

Я создал компонент, который отображает список элементов с флажками. Я использую setParams для передачи выбранных элементов в качестве реквизита, когда пользователь нажимает кнопку Готово - примерно так: 

 // SelectItems.js
 this.props.navigation.setParams({
   rightTitle: 'Done',
   onRight: () =>
     Actions.jump('newCollection', {
       selectedItems: this.state.taggedItems,
     }),
 });

Это работает нормально, и когда компонент newCollectionрендеринга, я могу показать список выбранных элементов из this.props.selectedItems в моей форме.

Мне нужно вызвать создателя действия, используя this.props.selectedItems, когда компонент монтируется.

Вот действие: 

      // NewCollection.js

      // Map the items selected in the the `selectItems` component
      // and invoke an action

      var fetchTaggedItems = new Promise((resolve, reject) => {
        this.props.taggedItemsFetch(this.props.taggedItems.map(x => x.uid));
        resolve(this.props.matchingOutfits);
      });

      fetchTaggedItems.then(x => {
            console.log(x);
            alert('done!');
          });

Теперь я понимаю, что компонент должен перемонтировать, когда он получит эти новые реквизиты, но это не так. Используя журналы в componentDidMount, я вижу, что он монтируется только при первой записи.

Я пробовал приведенный выше код:

  • Используя Actions.refresh() вместо Actions.jump() - ничегопроисходит
  • Использование static onEnter() для обновления состояния компонента и принудительного перемонтирования - невозможно получить доступ this.state
  • Вызов создателя действия изнутри render() - бесконечный цикл
  • Установка логического calledActionCreator флага в состояние для предотвращения бесконечного цикла - не работает - Сравнение this.props с prevProps в componentDidUpdate() - Ошибка: превышена максимальная глубина обновления

I 'Я начинаю думать, что это ошибка в React Native Router Flux.

Ответы [ 2 ]

0 голосов
/ 12 ноября 2019

ОК, поэтому после долгих раскопок и экспериментов я нашел решение, которое работает (по крайней мере, на поверхности).

Вот так: 

// NewCollection.js
  static onEnter() {
    Actions.refresh({key: Math.random()});
  }

Использование простого Actions.refresh() для повторной установки компонента, похоже, не дало никакого эффекта. Предоставление случайного ключа в качестве реквизита, по-видимому, вызывает обновление.

Я уверен, что это не самое элегантное решение, но пока оно работает.

0 голосов
/ 11 ноября 2019

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

        if (this.props !== prevProps) {
            this.setState({
               // do somethings
            })
        }
    }
...