Не удалось найти ошибку "store" в подключенном компоненте, вложенном в диалог - PullRequest
Новая
       30

Не удалось найти ошибку "store" в подключенном компоненте, вложенном в диалог

1 голос
/ 25 июня 2019

У меня есть подключенный компонент, который будет отображаться нормально, когда обернут в <div>, но когда я обертываю компонентом Dialog, я получаю страшное: не удалось найти «store» в контексте «Connect (MyComponent)» , Да, корень <App /> обернут в <Provider />, и хранилище в порядке, все другие страницы, компоненты, связанные элементы имеют доступ к хранилищу, только не при отображении в этом диалоге.

В прошлом это не было проблемой, и, очевидно, это объяснялось побочным эффектом некоторого обслуживания зависимостей, которое происходило. Если я поменяю базовую библиотеку компонента Dialog с MUI 0.20 на версию 3 (через @ material-ui / core / Dialog), все будет работать нормально. Что-то происходит с балансом между mui 0.20 и обновленными зависимостями реагирования.

Просто интересно, сталкивался ли кто-нибудь с этим? 

// Where it's invoked...

<ParentPageComp>
  <Dialog open>
    <MyConnectedComponent />
  </Dialog>
</ParentPageComp>

// What is being attempted to render...

class MyConnectedComponent extends React.Component {
  render() {
    return <div>Yeppers</div>;
  }
 }

export default connect(state => ({ blah: state.blah }))(MyConnectedComponent);

Опять же, если я заменю <Dialog> на <div>, все будет в порядке.

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

Использование:

  • Материал-интерфейс 0.20.2 (да, старый)
  • Реакция 16.8.6
  • Redux 4.0.1
  • React-redux 7.1.0
  • React-router-dom 5.0.0

1 Ответ

2 голосов
/ 26 июня 2019

Старая версия может легко блокировать распространение контекста через иерархию DOM. Вы можете вручную переносить контекст над <Dialog/> компонентом, таким как 

import { Provider, ReactReduxContext } from 'react-redux';

//...
render() {
    return (
        <ParentPageComp>
            <ReactReduxContext.Consumer>
                {((ctx) => (
                    <Dialog open>
                        <Provider store={ctx.store}>  /* make store available again */
                            <MyConnectedComponent />
                        </Provider>
                    </Dialog>
                )).bind(this) // Dont forget to bind this
                }
            </ReactReduxContext.Consumer>
        </ParentPageComp>
    );
}
...