Как сделать в обещании обещание

Question

Поскольку мне нужен доступ к indexeddb в рендере реагирования, я использую обещание и разделяю логику в рендере.

render(){
  if(original_flow) dispatch(applyUserAccFilters(groups));
  //access indexeddb
  else applyShopNameFilters(window,groups).then((
       ()=>{groupListItems=[];groupListItems.length=0;                    
            //generate UI in groupListItems
            //if I change groupListItems to be [], callback's called but empty UI is not rendered
            dispatch(genGroupList(groups,groupListItems));
            return this.paintUI(groupListItems);}),()=>{}
      );
  //original flow; this flow can work normally; render of this flow is normal
  dispatch(genGroupList(groups,groupListItems));
  return this.paintUI(groupListItems);

}

Поскольку я столкнулся с ситуацией, в которой реагировал, меня все равно попросили поместить return в нижнюю частьо рендере, я не могу не задаться вопросом, является ли какой-либо рендер в обратном вызове недопустимым в реакции?

Мне действительно нужно рендерить в обратном вызове разблокирующего IO;любые идеи приветствуются.

Answer 1

Из контекста, доступного в вопросе, мой ответ будет:

• Почти всегда вы не хотите выполнять какие-либо асинхронные операции в методе render.
• React предоставляет набор методов жизненного цикла для решения этой проблемы.В вашем случае, в зависимости от того, когда вы хотите, чтобы асинхронный метод был активирован, вы будете использовать следующее:
  1. ComponentDidMount (если вы хотите, чтобы ваш метод активировался, как только React загрузит соответствующий компонент)
  2. Укажите правила для обновления в ShouldComponentUpdate и выполните асинхронную функцию в ComponentDidUpdate;если у вас есть данные «LIVE», требующие обработки с помощью асинхронного метода.

Внутри вашей асинхронной функции используйте шаблон this.setState({key: value}), чтобы установить результаты асинхронной функции в состояние,В вашем методе render вы должны использовать соответствующую переменную состояния.Это идеальный, здоровый способ кодирования в React.